【问题标题】:CRUD & JsonP / Sencha Touch 2CRUD & JsonP / Sencha Touch 2
【发布时间】:2012-05-05 11:03:38
【问题描述】:

通过代理类型“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();

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

如何更新记录数据 - 通过代理上传到数据库?

【问题讨论】:

    标签: cordova proxy touch extjs jsonp


    【解决方案1】:

    您正在处理 CORS(跨源资源共享)默认情况下,在所有浏览器中都遵守这一点,并且所有 Web 服务器默认设置为不允许 CORS 请求。更多关于CORShere

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

    (Guru 读者,由于我将其声明为 wiki,因此请随时在此处添加更多服务器配置)

    使用 mod_proxy 和 mod_proxy_http 的应用程序

    打开您的虚拟主机文件并添加这些行(启用 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

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


    是的,您也可以毫不费力地将它与 Phonegap 一起使用

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

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

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

    按照以下步骤完成设置:

    阿帕奇

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

    $ a2enmod headers

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

    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 header

    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

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

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

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

    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 引擎也很有帮助

    由于篇幅太长,我将只提供一个博客的链接,其中所有内容都得到了正确的解释

    The link

    ...那么第二种方法呢

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

    现在由您决定采用哪种方法;)

    【讨论】:

    • 恐怕这对我来说不是一个选择,因为该应用程序不是通过 Web 服务器提供的,而是通过 PhoneGap 打包的移动应用程序提供的。不过,+1 因为如果您使用的是网络服务器,这绝对很有帮助。
    • 好吧,你还有选择,检查我的更新,因为我不知道你在使用 phonegap
    猜你喜欢
    • 2012-09-05
    • 1970-01-01
    • 1970-01-01
    • 2013-08-21
    • 2012-05-21
    • 2012-05-23
    • 1970-01-01
    • 2012-11-05
    • 1970-01-01
    相关资源
    最近更新 更多