Question

我在一个域上托管了一个使用以下标头启用CORS的域：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Max-Age: 1728000

我可以从hackst.com发出GET或POST请求，但它运行正常。链接：http://hackst.com/#w3SbV

从我在另一个域上托管的主干应用程序，GET请求正常工作。但是当我尝试创建并保存新模型（即发出POST请求）时，它会因以下错误而失败：

Failed to load resource: the server responded with a status of 501 (Not Implemented) http://projectwhatup.us:5000/api/posts
XMLHttpRequest cannot load http://projectwhatup.us:5000/api/posts. Origin http://ayush.projectwhatup.us is not allowed by Access-Control-Allow-Origin.

我的相关骨干代码：

var newPostData = {
    topic : "New Post",
    body : "new body",          
    user_id : 1,
};  

var newPostModel = new Post(newPostData);
this.model.create(newPostModel);

我甚至尝试过度使用create方法并手动发出POST请求：

create : function(data) {
    console.log('overriden create');

    $.ajax({
        "url" : this.url,
        "async" : true,
        "beforeSend" : function(obj){
            console.log(obj);
        },
        "contentType" : 'application/json',
        //"crossDomain" : true,  // uncommenting this doesnt help either
        "headers" : {

        },
        "dataType" : 'json',
        "type" : 'POST',
        "data" : JSON.stringify(data),
        "error" : function(err){
            console.log('new post creation failed');
            console.log(err);
        },
        "success" : function(resp){
            console.log('new post created');
            console.log(resp);
        }
    });
}

同样的错误。

我在JSFiddle上尝试了一个独立的GET请求（http://jsfiddle.net/X9cqh/5/），但即使我的骨干应用程序可以使GET请求正常，也会失败。

此时我完全无能为力。任何提示，指针，解决方案？

Answer 1

服务器还应使用以下标题回复预检：

Access-Control-Allow-Headers: Content-Type

这是必要的，因为内容类型是application / json，它超出了CORS规范（http://www.w3.org/TR/cors/）中定义的可接受值。

Answer 2

您的服务器设置有效。 JSFiddle显然没有提出ajax请求，但你可以通过在Chrome控制台或Safari开发者控制台中输入这四行来快速测试它的工作原理：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://projectwhatup.us:5000/api/posts', false);
xhr.send();
xhr.responseText;

enter image description here

如果您尝试使用不允许使用CORS的域，则会出错。

Answer 3

添加“Content-Type”标头会导致您的CORS请求失败的原因是您的服务器设置错误。

如果客户端希望指定特定标头或使用不常见的http方法动词（例如PUT），则浏览器将首先执行“预检”OPTIONS调用以确保允许设置这些标头。您的服务器需要使用适当的标头响应此OPTIONS调用。如果您想确认这就是问题所在，您会看到Chrome浏览器工具或firebug的网络标签中的选项。

您可能会对我更详细的回答here感兴趣。

跨域XHR失败

3 个答案: