cordova – CRUD&JsonP / Sencha Touch 2

通过代理类型’jsonp’上传记录的正确方法是什么？
我正在尝试使用代理类型“jsonp”同步()商店,但我收到错误消息.

这是模型：

Ext.define("Sencha.model.User", {
    extend:"Ext.data.Model",
    //idProperty:"",


    config:{
        fields:[
            'userID',
            'userName',
            'userEmail'
        ],


        proxy: {
            type: 'jsonp',
                create  : 'http://domainname.com/users.php?action=insert',
                read    : 'http://domainname.com/users.php?action=fetchAll',
                update  : 'http://domainname.com/users.php?action=update',
                destroy : 'http://domainname.com/users.php?action=delete'
            },
            callbackKey: 'callback',
            reader: {
                type: 'json',
                rootProperty: 'Users',
                successProperty: 'success',
                messageProperty: 'message'
            },
            writer: {
                type: 'json',
                writeAllFields: false,
                encode: true
            }
        }
    }
});

商店：

Ext.define("Sencha.store.Users", {
    extend:"Ext.data.Store",
    config:{
        model:"Sencha.model.User",
        remoteFilter:false,
        remoteSort:true,
        autoLoad:true,
        }
    }
});

商店更新：

Ext.getStore('Users').set('userName', 'Tom');

现在我想更新数据库中的记录：

Ext.getStore('Objects').sync();

但我得到错误：
未捕获错误：[错误] [Ext.data.proxy.Server #create] JsonP代理只能用于读取数据.

如何更新记录数据 – 通过代理将其上传到数据库？

您正在处理CORS(跨源资源共享)默认情况下,在所有brwsers中都遵守这一要求,并且默认情况下所有Web服务器都设置为不允许CORS请求.有关CORS here的更多信息

如果您是Web开发人员,并且拥有Web服务器,但您需要从javascript访问一些外部公司API,最简单的方法是将服务器设置为充当Web代理.以下是一些服务器的步骤

(大师读者,自从我将其称为wiki后,随意添加更多服务器配置)

使用mod_proxy和mod_proxy_http的Appache

打开虚拟主机文件并添加这些行(启用mod proxy foirst – 进一步阅读here)

ProxyPass /proxy http://domainname.com/
ProxyPassReverse /proxy http://domainname.com/

Nginx的

如果您使用NGIX进行应用程序配置,请添加以下行

location /proxy {
  proxy_pass        http://domainname.com/;
  proxy_set_header  X-Real-IP  $remote_addr; <-- maybe good to set
}

进一步阅读this link.

IIS

如果您使用的是IIS服务器

配置比上面那些复杂一点,但你可以找到它的全部内容here

对于上述所有示例而不是使用有限的JSONP功能,您现在可以在服务器上提供API时使用响应中的Ajax和JSON.

是的,您可以轻松地将它与Phonegap一起使用

我可以说一件大事.你要么服用蓝色药丸或红色药丸:)我正在加入,但有两种方法.一个involes再次拥有你自己的服务器配置如上,第二个是使用Phonegap原生插件弄脏你的手.

第一种方法(Web服务器所有者)

要求您拥有自己的Web服务器.对于mod_proxy,您需要以上配置,以便隐藏服务背后的真实服务并代理来自phonegap应用程序的所有HTTP请求.您还必须在响应中包含CORS(跨源资源共享)标头,该标头将返回到phonegap应用程序.还要考虑使用身份验证来保护此功能,因为您要向世界公开内容.您的phonegap应用程序至少通过HTTPS通过基本的HTTP身份验证对您的Web服务进行身份验证.

请按照以下步骤完成设置：

阿帕奇

在apache服务器上,首先启用模块“headers”

$a2enmod标题

在代理配置之前或之后的虚拟主机文件中添加以下内容

ProxyPass /proxy http://domainname.com/
ProxyPassReverse /proxy http://domainname.com/
# CORS allow to all
Header set Access-Control-Allow-Origin *
# Set basic authentication
<Location /proxy>
  AuthType Basic
  AuthName "Restricted Area"
  AuthBasicProvider file
  AuthUserFile /usr/local/apache/passwd/passwords
  Require valid-user # setup user/password in file above using htpasswd
</Location>

在phonegap(Sencha Touch)中,为ajax请求设置用户名和密码,如buffer.SlowBuffer();

您需要第一种方法来打包auth标头

function make_base_auth(user, password) {
  var tok = user + ':' + pass;
  var hash = Base64.encode(tok);
  return "Basic " + hash;
}

然后在你的代理集头像这样

headers : { Authorization : make_base_auth("some_username", "some_password") } // I know this is readable by other by you get the point.

IIS 6

要启用Microsoft IIS6的CORS,请执行以下步骤：

>打开Internet信息服务(IIS)管理器
>右键单击要为其启用CORS的站点,然后转到“属性”
>切换到HTTP标头选项卡
>在“自定义HTTP标头”部分中,单击“添加”
>输入Access-Control-Allow-Origin作为标题名称
>输入*作为标题值
>单击“确定”两次

可选,设置基本身份验证,这是直接的过程.

IIS 7

还要考虑检查上面提到的有关如何设置代理的文档,然后修改该web.config文件并添加以下内容

<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

nginx的

在位置附加以下

if ($request_method = 'OPTIONS') {

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;

    return 200;
 }

 if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 }

 if ($request_method = 'GET') {

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

 }

Google App引擎也很有帮助

由于它很长,以适应这个框,我将只提供一个博客,其中所有都是正确的exlained

The link

……那么第二种方法呢？

好吧它涉及一些原生编码,至少你需要phonegap插件phonegap-proxy,你可以找到here但我避免“本机”,因为phonegap点是使用单一代码的多平台应用程序…哦,如果你想做你的“特殊”插件在这里编写本机代码就是如何做same thing for facebook API的好例子

现在由你来决定你将采取哪种方法;)