在 Sencha Touch 2 中使用服务器从服务器加载存储数据答案

【问题标题】：Loading store data with rest proxy from server in Sencha Touch 2在 Sencha Touch 2 中使用服务器从服务器加载存储数据
【发布时间】：2013-01-16 21:55:28
【问题描述】：

我在论坛上四处搜索并阅读了一些其他帖子。但是，我不确定该怎么做。我有一个带有代理的商店，我试图从服务器加载数据。我已经尝试了 jsonp 和 rest 的代理类型，但没有运气。在这两种情况下，我都会收到 403 禁止错误。后跟一个 XMLHTTPRequest 无法加载错误。

这是我在 Chrome 控制台中看到的错误：

这是我的代码：

Ext.define('EventsTest.store.Venues', {
    extend: 'Ext.data.Store',


    requires: [
        'Ext.data.proxy.Rest',
    ],


    config: {
        storeId: 'venuesStore',
        model: 'EventsTest.model.Venue',
        proxy: {
            type: 'rest',
            url: 'http://leo.web/pages/api/',
            headers: {
                'x-api-key': 'senchaleotestkey'
            },
            limitParam: false,
            pageParam: false,
            enablePagingParams: false
            /*
            extraParams: {
                latitude: 45.250157,
                longitude: -75.800257,
                radius: 5000
            }
            */
        }
    }
});

【问题讨论】：

标签： rest proxy load sencha-touch-2 store

【解决方案1】：

浏览器和桌面的安全策略是不同的，所以即使在浏览器中失败，它也可以在手机中工作。但是现在的问题是如何在开发应用程序时进行管理，请查看这个类似的问题：

How to use json proxy to access remote services during development

关于得到 403 响应的 OPTION 请求，请尝试设置 withCredentials : false 和 useDefaultHeader : false。详情在这里

http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Operation-cfg-withCredentials http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Connection-cfg-useDefaultHeader

如果你想使用远程服务，我建议你阅读更多关于CORS的信息，你可以选择在你的服务器上启用CORS。

【讨论】：

谢谢弗洛伊德。我在设备上测试后发现，CORS 被 PhoneGap 完美处理，我没有任何此类问题。我能够很好地运行 REST 和 JSONP 调用。

【解决方案2】：

您正在本地域“sencha.test”上运行您的应用程序，但您正在尝试访问“leo.web”上的数据 - 错误是您正在尝试跨域加载数据，这是'不允许通过 AJAX。

你说 JSONP 行不通……为什么不呢？您的服务器是否返回有效的 JSONP？

【讨论】：

使用 JSONP 返回 403 Forbidden 并且没有返回有效数据。我使用 REST 的原因是 JSONP 不支持请求的 POST 方法。
如果 JSONP 请求遇到 403 错误，我怀疑这是您的服务器配置或 API 的问题......但您是正确的，所有 JSONP 请求都将是 GET 操作。如果您必须对 REST API 进行跨域请求，我可能会建议使用服务器端代理来处理事情。