node.js Access-Control-Allow-Origin 不允许 Origin http://localhost

Origin http://localhost is not allowed by Access-Control-Allow-Origin

提问by Willem Ellis

I'm trying to do a fetch from backbone.js to my node.js server. However, I get the following error in the console:

我正在尝试从backbone.js 获取到我的node.js 服务器。但是，我在控制台中收到以下错误：

Origin http://localhost is not allowed by Access-Control-Allow-Origin.

Origin http://localhost is not allowed by Access-Control-Allow-Origin.

I added the following to my node.js server:

我将以下内容添加到我的 node.js 服务器中：

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "http://localhost");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
};

app.configure(function() {
    app.use(allowCrossDomain);
});

But it's still returning the same error. However, even if this did work, it doesn't seem like the ideal solution, as I would like users from all over to be able to send requests.

但它仍然返回相同的错误。但是，即使这确实有效，它似乎也不是理想的解决方案，因为我希望来自各地的用户能够发送请求。

回答by ryanday

If you want everyone to be able to access the Node app, then try using

如果您希望每个人都能够访问 Node 应用程序，请尝试使用

res.header('Access-Control-Allow-Origin', "*")

That will allow requests from any origin. The CORS enablesite has a lot of information on the different Access-Control-Allow headers and how to use them.

这将允许来自任何来源的请求。该CORS使网站有大量的信息在不同的访问控制允许标题和如何使用它们。

I you are using Chrome, please look at thisbug bug regarding localhost and Access-Control-Allow-Origin. There is another StackOverflow question herethat details the issue.

我使用的是Chrome浏览器，请看看这对于本地主机和访问控制允许来源错误的bug。这里还有另一个StackOverflow 问题详细说明了这个问题。

回答by Stevo Perisic

If you are making the fetch call to your localhost which I'm guessing is run by node.js in the same directory as your backbone code, than it will most likely be on http://localhost:3000or something like that. Than this should be your model:

如果您正在对您的本地主机进行 fetch 调用，我猜它是由 node.js 在与您的主干代码相同的目录中运行的，那么它很可能会打开http://localhost:3000或类似的东西。这应该是你的模型：

var model = Backbone.Model.extend({
    url: '/item'
});

And in your node.js you now have to accept that call like this:

在你的 node.js 中，你现在必须接受这样的调用：

app.get('/item', function(req, res){
    res.send('some info here');
});

回答by mstreffo

There are 2 calls that need to set the correct headers. Initially there is a preflight check so you need something like...

有 2 个调用需要设置正确的标头。最初有一个预检检查，所以你需要像......

app.get('/item', item.list);
app.options('/item', item.preflight);

and then have the following functions...

然后有以下功能...

exports.list = function (req, res) {
Items.allItems(function (err, items) {
    ...
        res.header('Access-Control-Allow-Origin', "*");     // TODO - Make this more secure!!
        res.header('Access-Control-Allow-Methods', 'GET,PUT,POST');
        res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept');
        res.send(items);
      }
   );
};

and for the pre-flight checks

以及飞行前检查

exports.preflight = function (req, res) {
Items.allItems(function (err, items) {
        res.header('Access-Control-Allow-Origin', "*");     // TODO - Make this more secure!!
        res.header('Access-Control-Allow-Methods', 'GET,PUT,POST');
        res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept');
        res.send(200);
    }
  );
};

You can consolidate the res.header() code into a single function if you want.

如果需要，您可以将 res.header() 代码合并为一个函数。

Also as stated above, be careful of using res.header('Access-Control-Allow-Origin', "*") this means anyone can access your site!

同样如上所述，小心使用 res.header('Access-Control-Allow-Origin', "*") 这意味着任何人都可以访问您的网站！

回答by inf3rno

By localhost you have to use the nullorigin. I recommend you to create a list of allowed hosts and check the request's Hostheader. If it is contained by the list, then by localhost send back an

通过本地主机，您必须使用null原点。我建议您创建一个允许的主机列表并检查请求的Host标头。如果它包含在列表中，则通过 localhost 发回一个

res.header('Access-Control-Allow-Origin', "null");

by any other domain an

通过任何其他域

res.header('Access-Control-Allow-Origin', hostSentByTheRequestHeader);

If it is not contained by the list, then send back the servers host name, so the browser will hide the response by those requests.

如果它不包含在列表中，则发送回服务器主机名，因此浏览器将隐藏这些请求的响应。

This is much more secure, because by allow origin * and allow credentials everybody will be capable of for example stealing profile data of a logged in user, etc...

这更安全，因为通过允许来源 * 和允许凭据，每个人都可以例如窃取登录用户的个人资料数据等......

So to summarize something like this:

所以总结一下：

if (reqHost in allowedHosts)
    if (reqHost == "http://localhost")
        res.header('Access-Control-Allow-Origin', "null");
    else
        res.header('Access-Control-Allow-Origin', reqHost);
else
    res.header('Access-Control-Allow-Origin', serverHost);

is the most secure solution if you want to allow multiple other domains to access your page. (I guess you can figure out how the get the host request header and the server host by node.js.)

如果您想允许多个其他域访问您的页面，这是最安全的解决方案。（我想你可以弄清楚如何通过 node.js 获取主机请求标头和服务器主机。）

回答by Ranjoy Ghosh

This approach resolved my issue to allow multiple domain

这种方法解决了我的问题以允许多个域

app.use(function(req, res, next) {
      var allowedOrigins = ['http://127.0.0.1:8020', 'http://localhost:8020', 'http://127.0.0.1:9000', 'http://localhost:9000'];
      var origin = req.headers.origin;
      if(allowedOrigins.indexOf(origin) > -1){
           res.setHeader('Access-Control-Allow-Origin', origin);
      }
      //res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8020');
      res.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
      res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
      res.header('Access-Control-Allow-Credentials', true);
      return next();
    });