Question

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

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

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

XMLHttpRequest无法加载http://localhost:51274/api/series。请求标头字段Access-Control-Allow-Headers不允许使用Content-Type。

它从未到达POST，而是在OPTIONS调用后失败。 Fiddler正在运行，所以我在下面发布了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

我假设从这个$资源，在做CORS之前通过发送OPTIONS执行“飞行前检查”，有效地说我可以对这个URL进行POST吗？答案似乎是YES，并且use可以使用标题Content-Type。 B ut然后$ 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>

在我看来，无论是$资源还是存在错误，而且更有可能，我做了一些非常愚蠢的事情并且没有完全理解它。

Answer 1

您的Access-Control-Allowed-Headers标头中有下划线而不是短划线： Access-Control_Allow-Headers: Content-Type

应该是：

Access-Control-Allow-Headers: Content-Type

Web API CORS Angular $资源

1 个答案: