CRUD＆amp; JsonP / Sencha Touch 2

时间：2012-04-24 18:51:27

标签： cordova proxy touch extjs jsonp

通过代理类型'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代理只能用于读取数据。

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

1 个答案:

答案 0 :(得分：7)

您正在处理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服务器。您需要上面的mod_proxy配置，这样您就可以隐藏服务背后的真实服务，并代理来自phonegap应用程序的所有HTTP请求。您还必须在响应中包含CORS（跨源资源共享）标头，该标头将返回到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标头

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

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

    8. 可选，设置基本身份验证，这是直接过程。

    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

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

相关问题
最新问题