javascript - CORS 问题 - 从 Backbone JS 调用 Web 服务

Question

我正在探索主干js，我的要求是将用户详细信息(如姓名、电子邮件 ID 等)发布到网络服务。但是当我运行该应用程序时，我收到如下错误:

在 Chrome 上，

XMLHttpRequest cannot load localhost:8080/service/customer/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8050' is therefore not allowed access.

在火狐浏览器上，

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost:8080/service/customer/. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

两个浏览器的 header 响应是，

On Chrome On Firefox

我在互联网上进行了研究并确定为 CORS 问题，但我很困惑，是否需要在 JS 文件中添加任何代码配置以及将这些代码放在哪里。如果有任何代码，我需要将代码放在单独的js文件中吗？

这是我的验证 js 文件中的代码片段，

var ValidationModel = Backbone.Model.extend({

urlRoot: 'http://localhost:8080/service/customer',
defaults: {
    ID: '',
    fname: '',
    lname: '',
    email: ''.....
myValidationModel.save(myValidationModel.attributes,
        {
    success: function(model, response, options){
        console.log('Model Saved..');
        console.log('ID: ' + myValidationModel.get('id'));
    },
    error: function(model, xhr, options){
        console.log('Failed to save model');
    }...

我真诚地请求各位 friend ，因为我是新手，请给我一个关于如何解决这个问题的想法、指导和建议，以及将代码放在哪里。如果您能给我链接到任何有用的文章，那就太好了。

非常感谢。

Answer 1

这是服务器端问题。 This提供了有关如何在不同平台上启用 CORS 的精彩总结。

如果您因为在本地开发而感到困惑，请注意不同的端口号也可能引发 CORS 错误。

例如，我有一个服务器位于 http://localhost:8080其上运行一个网站。我还有另一个网站http://localhost:8082它消耗 8080 上的服务，这会导致 CORS 问题。

客户端唯一需要注意的是，如果添加任何其他 header ，则必须将服务器端的 CORS 配置为允许这些 header 。例如，我添加以下安全 token ，以便主干可以访问服务器端的模型数据:

$.ajaxSetup({
    headers : {
        "X-Auth-Token" : usercredentials.getAccessToken(),
    }
});

这意味着服务器端的 CORS 必须允许 header X-Auth-Token。如果您不添加任何其他 header ，那么通常您只需配置 Origin 并允许相关方法 GET、POST、PUT 等。 。 。

在您的情况下，您似乎必须在服务器上配置 CORS 以允许来自 Origin localhost:8080 的 POST 调用。客户端会自动添加此 header 。服务器只需要允许它即可。