骨干网.js不会发出跨主机请求吗？

Question

我一直在Chrome控制台上玩Backbone，遇到了一个我无法解决的跨域问题。

我连接到的主机可能正确地实现了CORS，因为原始XHR请求返回预期的JSON:

var http = new XMLHttpRequest();
http.open('GET', 'http://example.com:3000/entities/item/15.json', true);
http.onreadystatechange = function(evt) { console.log(evt); }
http.send();

(在控制台记录3个XHR进度事件，响应中包含正确的数据)

但是当我对Backbone做以下操作时，浏览器不喜欢它:

var Item = Backbone.Model.extend({});
var ItemsCollection = Backbone.Collection.extend({
  model: Item,
  url: 'http://example.com:3000/entities/item/'
});
var items = new ItemsCollection();
items.fetch();

返回XMLHttpRequest cannot load http://example.com:3000/entities/item/. Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.

我需要做些什么来告诉Backbone使用CORS吗?这个错误似乎是在浏览器发出请求之前出现的，所以我不认为这是服务器配置错误。

Answer 1

我希望这些帮助之一(我还没有尝试):
1. 重写Backbone.js sync以允许跨原点

(function() {
  var proxiedSync = Backbone.sync;
  Backbone.sync = function(method, model, options) {
    options || (options = {});
    if (!options.crossDomain) {
      options.crossDomain = true;
    }
    if (!options.xhrFields) {
      options.xhrFields = {withCredentials:true};
    }
    return proxiedSync(method, model, options);
  };
})();

2。跨域CORS支持backbone.js

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    options.crossDomain ={
        crossDomain: true
    };
    options.xhrFields = {
        withCredentials: true
    };
});

Answer 2

你可以这样写:

 var PostsCollection = Backbone.Collection.extend({
   initialize: function(models, options) {
     //this.id = options.id;
   },
   url: 'http://myapi/api/get_posts/?count=8',
 });
 posts = new PostsCollection();
 posts.fetch({
   dataType: 'jsonp',
   success : function (data) {
     console.log(data);
   }
 });

关键是我们需要使用'jsonp'

Answer 3

事实证明，我用Backbone请求的url与通过XHR请求的url略有不同(它们缺少一个查询)。这会导致服务器返回500，而500没有CORS标头。Chrome在调试面板的网络选项卡中根本没有显示HTTP请求，所以我非常困惑。

在服务器上修复了500，使它再次工作。