【问题标题】:Setting default response headers in Express在 Express 中设置默认响应标头
【发布时间】:2015-11-28 17:13:24
【问题描述】:

我正在开发一个在 MEAN 堆栈上运行的小型应用程序,但遇到了一个烦人的问题:我的后端应用程序(带有 Express 的节点)在 http://localhost:3000 上运行并且运行良好,但我的前端客户端应用程序(带有 AngularJS 的 Javascript)在 http://localhost:8000 运行,这意味着从 Angular 发送的请求会被接收并响应,但一旦到达就会被拒绝,因为它们被解释为来自不同的来源。

通过使我的“向我展示所有东西”方法看起来像这样,我能够以相对较少的戏剧性解决这个问题:

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'); 行是我添加的行,它告诉浏览器可以接受响应并停止打扰我;现在的问题是我必须将这条愚蠢的行添加到从任何地方发送的每个响应中,并且我确信我必须缺少某种方法来更改默认标头以永远包含 Access-Control-Allow-Origin 条目。

在一个完美的世界里,我可以根据执行代码的环境来打开和关闭它,但我完全接受了 app.js 中的一个代码块,我至少可以删除它一次,而不是试图追踪 75 个 res.setHeader 实例。我认为必须有一种方法可以更改隐藏在其基础res 后面的.json 方法,但是文档没有提供任何关于我如何做到这一点的见解,更不用说这是否是一个糟糕的主意。有什么想法吗?

编辑

我认为(如建议的那样)configuring application-level middleware 是关键。这是我添加到 app.js 文件中的代码:

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

但是,这产生了与以前相同的错误(“请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”)。

【问题讨论】:

  • 这就是app.use() 用于安装一个可以查看/修改所有请求的中间件处理程序。
  • 我感觉我已经很接近了,但是我正在注册的中间件似乎没有做任何事情(请参阅我的问题的编辑);我添加了一些调试输出以查看它何时执行,但它从未在控制台中弹出。我对the "setHeaders" option in the built-in middleware 持乐观态度,但它只针对静态资源,我找不到对应的第三方来处理……其他所有内容。
  • 您可能还需要设置Access-Control-Allow-Headers。见jonathanmh.com/how-to-enable-cors-in-express-js-node-js
  • 试试 npm 模块 npmjs.com/package/cors 很稳定
  • @jfriend00:如果我使用原始的、重复的方式设置标题,不管有没有Access-Control-Allow-Headers,它都可以工作。 @jusynth:打包的“cors”工作!起初,它像我尝试过的其他六个软件包一样失败了,但是将 app.use(cors());app.use(foo) 条目列表的底部移动到列表顶部修复了这一切。不知道为什么。非常感谢。

标签: javascript node.js express cors mean-stack


【解决方案1】:

试试这个作为中间件:

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

【讨论】:

  • 这对生产用例安全吗?
  • 你可以为Access-Control-Allow-Origin标头使用精确的IP更安全,并且可以删除Access-Control-Allow-Headers中的X-Requested-With。否则,没关系
【解决方案2】:

您可以使用 .use() 制作一个通用中间件,也可以使用像 express-interceptor 这样的 npm 包来拦截响应

【讨论】:

  • 呸,我不想取消将其标记为答案,但我意识到一旦我批准了这个,我就忘记了重新启动服务器。我在上面添加了我的 sn-p,这样你就可以看到添加了什么,但它实际上并没有工作。
【解决方案3】:

我刚刚遇到了同样的问题并尝试了上面相同的 sn-p。它成功了。

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

重要提示:我必须将它置于所有其他app.use(xyz) 条目之上,就像@rev_bird 提到他对CORS 模块所做的那样。试试看。

【讨论】:

    猜你喜欢
    • 2017-05-07
    • 2017-06-17
    • 2015-11-21
    • 2015-03-10
    • 2022-11-01
    • 1970-01-01
    • 2020-05-26
    • 2018-04-11
    • 1970-01-01
    相关资源
    最近更新 更多