使用 Angular 和 NodeJs (CORS) 的跨域请求

Posted 2023-03-04

【中文标题】使用 Angular 和 NodeJs (CORS) 的跨域请求

【英文标题】：Cross domain requests using Angular & NodeJs (CORS)

【发布时间】：2017-07-22 02:55:33

【问题描述】：

我正在尝试通过 CORS 使用 Angular 和 NodeJs 进行跨域请求（GET、POST、DELETE...）。我在 Chrome 浏览器上尝试时成功，但在 Win7 上的 IE11 上出现以下错误。

SEC7118: XMLHttpRequest for http://master.domain:1300/login required Cross-Origin Resource Sharing (CORS).

SEC7119: XMLHttpRequest for http://master.domain:1300/login required CORS preflight.

SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

主域方面我设置了标题Access-Control-Allow-Origin，因此在 Chrome 上成功运行。

我已经尝试过xdomain 库，但我无法使用 Angular 成功。我可能会错过一些东西，但我不知道是什么。网上没有例子。

如何在 IE 上进行此操作？我可以使用除 CORS 之外的任何其他方式。

有什么帮助吗？

谢谢

【问题讨论】：

通常从 IE10 开始，原生支持 CORS。而对于 IE8&9，您需要使用 XDomainRequest 函数。您的主请求上的 CORS 配置是什么配置？

我设置像这样的标题： res.setHeader('X-Frame-Options', 'deny'); res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, OPTIONS'); res.setHeader('Access-Control-Allow-Credentials', true);

你设置了什么样的 Content-Type 标头？

在客户端（Angular2）请求时我设置了 'Content-Type':'application/json' 。

服务器端CORS配置需要设置Access-Control-Allow-Headers: Content-Type

【参考方案1】：

仅设置“Access-Control-Allow-Origin”标头可能还不够，具体取决于您发出的请求类型。您还应该设置“Access-Control-Allow-Methods”和“Access-Control-Allow-Headers”

举个例子：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Allow-Headers: Content-Type

【讨论】：

我设置了你提到的所有标题。

【参考方案2】：

只需在 nodejs 中尝试此代码即可运行

app.use(function (req, res, next) 
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
);