【发布时间】: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