javascript - Angularjs 应用程序无法通过 POST 方法跨域

Question

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

<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 cannot load http://api.justbooksaloon.com/api/Customer/Login. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response. angular.js:14110 POST http://api.justbooksaloon.com/api/Customer/Login null

Answer 1

Access-Control-* header 是响应 header 。

您正在尝试将它们设置为请求 header 。

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

服务器不期望它们(它们是响应 header ，作为请求 header 没有任何意义)，因此它说“不”。

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