我一直在玩骨干在自己的Chrome控制台,并运行到,我不能想出一个跨域问题。
我连接到正确想必主机实现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进度事件与所述响应正确的数据)
但是当我做了与骨干以下的浏览器不喜欢它:
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.
)
有什么我需要做的,告诉骨干与CORS工作? 这个错误似乎已经到来之前,浏览器甚至提出的要求,所以我不认为这是一个服务器配置错误。
我希望这些人帮助(我没有尝试尚未):
1. 重写Backbone.js的同步,以允许跨源
(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
};
});
嘿,你可以使用这样的:
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”
原来我与骨干请求的URL均较通过XHR请求略有不同(他们缺少一个queryarg)。 这导致服务器500,其不具有CORS标头。 Chrome浏览器未显示在所有的HTTP请求,在调试面板的网络选项卡上,所以我非常困惑。
修复再次进行这项工作在服务器上500。