网络 API CORS Angular $资源

Question

我有一个 Web API 使用 MVC4 和 Web API 在 VS2012 中构建 2. 前端是使用 ui-grid 在 AngularJS 中开发的。 VS2012 JavaScript 编辑器真的不是很友好，所以我使用JetBrains WebForm 9 来开发前端。这意味着对后端的每个请求都是一个 CORS 请求。

在前端，我使用 $http 完成了所有工作，但由于这个项目虽然有用，但我正在使用它来学习，所以我决定改为使用 $resource。但是 $http 在后端成功地使用了 GET、POST、OUT 和 DELETE 接口，所以我知道它们都有效。

但是，当我将代码转换为使用 $resource 时，查询工作正常但保存不工作。它在 JaveScript 控制台中产生以下错误。

XMLHttpRequest cannot load http://localhost:51274/api/series. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

它永远不会达到 POST，而是在 OPTIONS 调用后失败。 Fiddler 是运行所以我 post 下面的 HttpRequest 和 HttpResponse。请记住，在 $http 实现中，POST 工作正常。

OPTIONS http://localhost:51274/api/series HTTP/1.1
Host: localhost:51274
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:63342
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
Referer: http://localhost:63342/AWSOrderEntry/index.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

响应是

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?YzpcdXNlcnNcbWhvcnRvbi5ucmhcZG9jdW1lbnRzXHZpc3VhbCBzdHVkaW8gMjAxMlxQcm9qZWN0c1xBV1NPcmRlckVudHJ5XEFXU09yZGVyRW50cnlcYXBpXHNlcmllcw==?=
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control_Allow-Headers: Content-Type
Access_Control-Allow-Methods: *
Date: Mon, 16 Feb 2015 04:32:52 GMT
Content-Length: 0

我由此假设 $resource 在执行 CORS 之前通过发送有效地说明我可以 POST 反对此 URL 的选项来执行 "pre-flight check" 吗？答案似乎是 YES 并且可以使用 header Content-Type。但是 $resource 看到了这个并抱怨它不允许在请求中发送 Content-Type。因此它会发出一条消息并在调用时出错，而不会发出 POST。在 DEBUG 模式下，Fiddler 从不显示 POST 和后端 enter code here 不会因控制器中的 POST 请求而停止。

以下是Web.config中的条目。

  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control_Allow-Headers" value="Content-Type"/>
    <add name="Access_Control-Allow-Methods" value="*" />
  </customHeaders>

在我看来，要么 $resource 中存在错误，要么，这更有可能，我做了一些非常愚蠢的事情并且没有完全理解它。

Answer 1

您的 Access-Control-Allowed-Headers header 中有下划线而不是破折号： Access-Control_Allow-Headers: Content-Type

应该是：

Access-Control-Allow-Headers: Content-Type

网络 API CORS Angular $资源

Web API CORS Angular $resource

cors

asp.net-web-api2

angular-resource