CRUD & JsonP / Sencha Touch 2

Posted 2023-03-03

【中文标题】CRUD & 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 代理只能用于读取数据。

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

【参考方案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，请执行以下步骤：

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

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

The link

...那么第二种方法呢

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

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

【讨论】：

恐怕这对我来说不是一个选择，因为该应用程序不是通过 Web 服务器提供的，而是通过 PhoneGap 打包的移动应用程序提供的。不过，+1 因为如果您使用的是网络服务器，这绝对很有帮助。

好吧，你还有选择，检查我的更新，因为我不知道你在使用 phonegap