Angularjs应用程序无法通过POST方法跨域答案

【问题标题】：Angularjs application fail POST method to cross domainAngularjs应用程序无法通过POST方法跨域
【发布时间】：2016-12-20 21:20:45
【问题描述】：

我正在尝试调用已启用跨域访问的 ASP.Net web api 的 post 方法，如下所示。

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>
</httpProtocol>

我的 Angular 应用程序是一个快速应用程序。它调用post方法如下。

method: "POST",
  data: data,
  url: "http://api.justbooksaloon.com/api/Customer/Login",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST',
    'Access-Control-Allow-Headers': 'Content-Type, Origin, X-Requested-With, Accept'

但它给了我以下错误。

XMLHttpRequest 无法加载 http://api.justbooksaloon.com/api/Customer/Login。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin。 angular.js:14110 POST http://api.justbooksaloon.com/api/Customer/Login null

【问题讨论】：

标签： javascript angularjs node.js rest asp.net-web-api

【解决方案1】：

Access-Control-* 标头是响应标头。

您正在尝试将它们设置为 request 标头。

由于它们不是标准请求标头，因此您会触发一个预检请求，询问服务器它们是否可以接受。

服务器不期望它们（它们是响应标头，作为请求标头没有意义），因此它说“不”。

不要尝试在客户端 JavaScript 中设置它们。

【讨论】：

通过删除那些我得到以下错误。 '预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Max-Age'
@JanithWidarshana — 也以Access-Control 开头。从您的客户端代码中删除它。
我现在不发送任何标头参数。但它仍然给出“请求头字段 Access-Control-Max-Age 不允许在预检响应中被 Access-Control-Allow-Headers 所允许。”错误。
@JanithWidarshana — 您正在发送它们。错误消息告诉您您正在发送它们。设置它们的代码可能不在一个明显的地方，但它就在某个地方。
是的，我已经设置好了。谢谢:)