Question

我正在研究一个在MEAN堆栈上运行的小应用程序，并且遇到了令人讨厌的障碍：我的后端应用程序（Express节点）正在http://localhost:3000运行并且运行正常，但是我的前端客户端应用程序（带有AngularJS的Javascript）正在http://localhost:8000运行，这意味着从Angular发送的请求被接收并响应，但是一旦它们到达就被拒绝，因为它们被解释为来自不同的原点。

我能用相对较少的戏剧来解决这个问题，让我向我展示所有的东西＆＃39;方法看起来像这样：

exports.index = function(req, res) {
  Region.find({}, function(err, docs) {
    if(!err) {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
      res.json(200, { regions: docs });
    } else {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
      res.json(500, { message: err });
    }
  });
}

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');行是我添加的一行，告诉浏览器接受响应并停止打扰我这件事是正常的;现在的问题是我必须将这个愚蠢的行添加到从任何地方发送的每个响应中，并且我确信我必须错过某种方式来更改默认标头以包含{{1永远进入。

在一个完美的世界中，我能够根据执行代码的环境来打开和关闭它，但我完全适应了app.js中的代码块我至少可以删除一次，而不是试图追踪75 Access-Control-Allow-Origin个实例。我认为必须有一种方法可以更改隐藏在res.setHeader后面的.json方法，但是文档并没有提供任何有关我如何做到这一点的见解，更不用说它是否＆＃39;一个可怕的主意。有什么想法吗？

修改

我认为（按照建议）configuring application-level middleware是关键。这是我添加到app.js文件中的代码：

res

然而，这产生了同样的错误（＆＃34; No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在所请求的资源上。＆＃34;）和以前一样。

Answer 1

你可以使用.use（）创建一个公共中间件，或者也可以使用像express-interceptor这样的npm包拦截响应

Answer 2

尝试将此作为中间件：

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
  next();
});

Answer 3

我刚遇到同样的问题并尝试了上面的相同代码段。它成功了。

// allow CORS:
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
  next();
});

我必须确保将它放在所有其他app.use（xyz）条目之上，就像@rev_bird提到他用cors模块做的那样。试试吧。

在Express

3 个答案: