使用 ember-data 缺少选项请求答案

【问题标题】：Missing options request using ember-data使用 ember-data 缺少选项请求
【发布时间】：2013-08-19 18:15:35
【问题描述】：

我正在尝试处理 ember 和 ember 数据，但在正确处理 CORS 时遇到问题。

我已经设法使用静态夹具定义模型等，但现在想使用一些远程 JSON。所以我像这样设置 ember-data：

App = Ember.Application.create();

App.Store = DS.Store.extend({
    revision: 13,
    adapter: DS.RESTAdapter.create({
        url: 'http://clara.eagle/v1/money'
    })
});

这样的模型：

App.Transaction = DS.Model.extend({
    type:       DS.attr('string'),
    occurrence: DS.attr('date'),
    details:    DS.attr('string'),
    amount:     DS.attr('number'),
    currency:   DS.attr('string') 
});

还有这样的路线：

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return App.Transaction.find();
    }
});

作为后端，我有一个现有的 API，它将为有效的 GET 请求返回 JSON，以下 CORS 标头为 OPTIONS 请求。

Access-Control-Allow-Origin: http://ember.eagle
Access-Control-Allow-Headers: X-Requested-With, X-AUTHENTICATION, X-IP
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

（ember.eagle 为 ember 应用域，clara.eagle 为 api 域）。

当我运行应用程序时，chrome 告诉我：

XMLHttpRequest cannot load http://clara.eagle/v1/money/transactions. Origin http://ember.eagle is not allowed by Access-Control-Allow-Origin.

所以我查看了网络选项卡以查看OPTIONS 请求给出的结果，但我找不到。虽然这解释了 API 请求失败的原因，但我不知道为什么 OPTIONS 请求没有被执行，因为它最终使用 jQuery 发出请求（据我所知）。

因此，我的问题是为什么没有生成这个OPTIONS 请求？如果不是这样设计的，我该如何做到呢？

我已经测试了OPTIONS 请求是由 API 生成的，并且 GET 请求也有效，所以我不认为 API 有问题 (screenshot)。单独使用 jQuery（即 vanilla jQuery）OPTIONS 请求按预期运行。

我是 Ember os 的新手，我可能缺少一些东西，但目前我看不到它！

【问题讨论】：

您是否注意到您的 API 的 URL 是 http://clara.eagle 并且您的后端设置指向 http://ember.eagle？
@intuitivepixel 对不起，你是什么意思？ ember.eagle 向 clara.eagle 发出请求 - clara.eagle 将 ember.eagle 标记为允许的来源。

标签： ember.js ember-data cors

【解决方案1】：

在客户端：

Ember.$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-IP', 'some value');
    }
});

或

Ember.$.ajaxSetup({
    headers: { 'X-IP': 'some value' }
});

在服务器端，响应一个options方法：

Access-Control-Allow-Origin: http://ember.eagle
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, X-Prototype-Version, X-IP
Access-Control-Max-Age: 1728000

【讨论】：

【解决方案2】：

您可以尝试以下两种更改：

App.Store = DS.Store.extend({
  revision: 13,
  adapter: DS.RESTAdapter.create({
    url: 'http://clara.eagle/v1/money',
    corsWithCredentials: true
  })
});

另外将它添加到您的服务器配置 Access-Control-Allow-Credentials: true 这与 ajax 设置的 corsWithCredentials 选项一起使用：

Access-Control-Allow-Origin: http://ember.eagle
Access-Control-Allow-Headers: X-Requested-With, X-AUTHENTICATION, X-IP
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

希望对你有帮助。

【讨论】：