Access-Control-Allow-Origin不允许访问http://localhost

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

本文关键字：localhost http 不允许 访问 Access-Control-Allow-Origin      更新时间：2023-09-26

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

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

我在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);
});

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

如果你想让每个人都能访问Node应用程序，那么尝试使用

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

允许来自任何来源的请求。CORS启用站点有很多关于不同的Access-Control-Allow标头以及如何使用它们的信息。

如果你正在使用Chrome，请看看这个关于本地主机和Access-Control-Allow-Origin的bug。这里有另一个StackOverflow问题详细说明了这个问题。

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

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

在node。js中，你需要接受这样的调用:

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

有2个调用需要设置正确的标头。一开始有一个飞行前检查，所以你需要一些东西，比如……

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

，然后有以下功能…

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);
      }
   );
};

和飞行前检查

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);
    }
  );
};

如果你愿意，你可以把res.header()代码合并成一个函数。

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

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

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

的任何其他域和

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

如果列表中不包含服务器主机名，则返回服务器主机名，这样浏览器将隐藏这些请求的响应。

这更安全，因为通过allow origin *和allow凭据，每个人都可以窃取登录用户的配置文件数据，等等。

总结如下:

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);
如果您希望允许多个其他域访问您的页面，

是最安全的解决方案。(我想你可以弄清楚如何通过node.js获得主机请求头和服务器主机)

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

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();
    });
相关文章：