Angular 2 CORS 问题答案

【问题标题】：Angular 2 CORS issuesAngular 2 CORS 问题
【发布时间】：2017-06-20 16:59:24
【问题描述】：

我有以下 Angular 2 http 请求；

const endpoint = '<auth_url>';
const body = {
  prompt: 'consent',
  grant_type: 'authorization_code',
  redirect_uri: '<redirect_url>',
  code: '<authorization_code>'
};

const headers = new Headers();
headers.append('Authorization', 'Basic <auth>');
headers.append('Content-Type', 'application/x-www-form-urlencoded')

const options = new RequestOptions({ headers });

this.http.post(endpoint, body, { headers: headers })
.map(res => res.json())
.subscribe(
  data => console.log(JSON.stringify(data)),
  error => console.error(JSON.stringify(error)),
  () => console.log('Request complete')
);

这是连接到已附加到 ExpressJS 实例的node-oidc-provider，我遇到的问题是 CORS，因为由于预检，请求最终在服务器上显示为 OPTIONS。这不应该是这种情况，因为我已经指定了Content-Type 标题，如上所示。烦人的是，我想弄清楚这是服务器问题还是我的 Angular2 代码的问题？

我是否需要在 ExpressJS 应用程序上显式启用 CORS，如果不需要，为什么在 POST 上设置正确的标头无效？

【问题讨论】：

需要在服务器上配置CORS。在 JS 中你无能为力（因此 Angular 也不能）。在某些情况下，它可以使用 JSONP 解决，但这非常有限。
谢谢，请看我对下面答案的评论

标签： node.js http angular post cors

【解决方案1】：

是的，您需要在服务器端启用 CORS。也就是说，如果您可以控制服务器。这是应该从服务器返回以启用 CORS 的标头

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept

您可以分享有关您的服务器的一些详细信息，例如您想从代码中还是在 WebServer 本身中添加这些标头。

关于为什么在POST请求中设置headers没有效果的问题。浏览器在你的 XHTTP 请求之前发出一个 OPTION 请求，向服务器请求关于接受 CORS 的许可。

所以，如果您对服务器有控制权，那么您可以添加我之前提到的标头。如果没有，那么你可以使用一些浏览器插件来克服这个检查。

这是开发人员工具中的网络选项卡的外观

【讨论】：

有一件事，虽然如果我向该服务器发出 curl 请求，我会得到预期的响应，即没有设置“Content-Type”标头，我也可以在 POSTMAN 中设置该标头并获取期望的反应。节点应用程序位于带有 PhusionPassenger 的 NGINX 实例后面，所以我可以在那里添加它们，对吧？奇怪的是，这个请求使用上述技术而不是 Angular？
它不能从角度工作，因为“浏览器”本身正在进行预检。来自 curl 或 postman 的 POST 请求会像任何其他请求一样直接发送到服务器。 CORS 检查由浏览器强制执行。是的，您可以将它们作为固定标头直接添加到服务器中。我的建议是从代码中添加它们以更好地控制它。
出于安全原因，浏览器限制从 javascript 内部发起的跨域 HTTP 请求。 Angular 在浏览器中运行 :)
你们太棒了。感谢您的帮助.. 周末愉快 ;-)
我仍然收到 OPTIONS 请求，并且 Angular 中的响应为空？