如何在 MEAN STACK Web 应用程序中启用 CORS?

Posted

技术标签:

【中文标题】如何在 MEAN STACK Web 应用程序中启用 CORS?【英文标题】:How to enable CORS in MEAN STACK web app? 【发布时间】:2015-07-24 20:16:21 【问题描述】:

我正在开发一个 MEAN-STACK 应用程序。使用节点的 Mean-cli packgae。 我在其中使用 Darksky 天气 API, 在包名信息中。我在平均应用程序的自定义文件夹中有 4 个其他包。 我如何启用 CORS 以使所有 API 请求都不会失败并返回响应。

我搜索了一下,发现我必须添加这个中间件。

 //CORS middleware
var allowCrossDomain = function(req, res, next) 
    res.header('Access-Control-Allow-Origin', 'example.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();

我应该在哪里添加这个。在我们使用跨域请求的每个包中或在某个全局文件中。

我试图在服务器路由文件中添加这个中间件?信息包和配置文件的express.js文件中,但它不起作用。

【问题讨论】:

【参考方案1】:

因此,您的问题的实际解决方案是使用 jsonp 回调和 forecast.io api,因为他们没有为客户端访问启用 CORS 标头。像这样使用$http.jsonp

$http.jsonp(url + lat + ',' + lng + '?callback=JSON_CALLBACK');

通常要在您的 expressjs 服务器上启用 CORS,请执行以下操作。

    安装cors 模块以使用npm install cors 表达 需要它var cors = require('cors'); 使用app.use(cors()); 在您的快速应用实例上设置它

cors 模块将自动在响应中添加所有与 aors 相关的标头。或者,您也可以配置很多选项。检查official docs

如果你想自己做,你可以这样做

var permitCrossDomainRequests = function(req, res, next) 
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
// some browsers send a pre-flight OPTIONS request to check if CORS is enabled so you have to also respond to that
if ('OPTIONS' === req.method) 
  res.send(200);

else 
  next();

;

然后启用您的 CORS 中间件

app.use(permitCrossDomainRequests);

在最后启用路由

app.use(app.router);

【讨论】:

试过了,但在本地和aws中都不起作用 @ashish_pbh 你遇到了什么错误是控制台还是在 Chrome 开发工具的网络选项卡中? 该错误是用于访问预测 io 问题,而不是您自己的服务器。您在服务器上启用 cors 不会解决您的问题 使用 jsonp 从您的客户端 Angular javascript 调用 forecast.io api。提示:像这样使用$http.jsonp$http.jsonp(url + lat + ',' + lng + '?callback=JSON_CALLBACK');【参考方案2】:

如果您只有一台 Express 服务器,则只需添加一次中间件。您的其他模块可能作为中间件提供给服务器。

如果您注册一个没有任何限定路径的中间件函数,例如app.use(function() ... ),则中间件将为服务器处理的每个请求运行。任何给定请求调用什么其他中间件都没有关系。

如果您有多个 Express 服务器同时运行(这不太可能),那么您需要将中间件添加到每个服务器。

【讨论】:

以上是关于如何在 MEAN STACK Web 应用程序中启用 CORS?的主要内容,如果未能解决你的问题,请参考以下文章

Mean stack web app的基于角色的访问控制

在将MEAN Stack应用程序部署到AWS EC2时设置环境变量

MongoDB Auth无法在Bitnami MEAN Stack Image上找到用户名

MEAN Stack:当 Angular 在 Node 文件夹中时,如何从 Node 启动 Angular

部署 MEAN Stack 应用程序,托管问题

如何将 MEAN Stack 部署到网络主机