cordova - CRUD & JsonP/Sencha Touch 2

Question

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

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

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

Answer 1

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

如果您是 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 native 插件弄脏您的手。

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

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

按照以下步骤完成设置:

Apache

在 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，请执行以下步骤:

打开 Internet 信息服务 (IIS) 管理器

右键单击要为其启用 CORS 的站点，然后转到属性

更改为 HTTP header 选项卡

在自定义 HTTP header 部分中，单击添加

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

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

The link

...那么第二种方法呢

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

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