在CORS预检频道的CORS标题"Access-Control-Allow-Headers"中缺少令牌"access-control-allow-headers"

Question

我有两个VS项目:一个暴露MVC5控制器,另一个是角客户端.我希望angular客户端能够查询控制器.我阅读了很多线程并尝试了以下内容:

• 我在服务器的web配置中添加了这个:

  <system.webServer>
      <httpProtocol>
         <customHeaders>
              <clear />
              <add name="Access-Control-Allow-Origin" value="*" />
          </customHeaders>
      </httpProtocol>
  <system.webServer>
  

• 我在控制器的动作上创建并使用了以下过滤器:

  public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
  {
      public override void OnActionExecuting(ActionExecutingContext filterContext)
      {
          filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
          base.OnActionExecuting(filterContext);
      }
  }
  

• 在angular客户端中,我创建了以下拦截器:

  app.factory("CORSInterceptor", [
      function()
      {
          return {
              request: function(config)
              {
                   config.headers["Access-Control-Allow-Origin"] = "*";
                   config.headers["Access-Control-Allow-Methods"] = "GET, POST, OPTIONS";
                   config.headers["Access-Control-Allow-Headers"] = "Content-Type";
                   config.headers["Access-Control-Request-Headers"] = "X-Requested-With, accept, content-type";
                   return config;
              }
       };
  }
  ]);
  
  app.config(["$httpProvider", function ($httpProvider) {
      $httpProvider.interceptors.push("CORSInterceptor");
  }]);
  

根据Firebug,这导致以下请求:

OPTIONS //Login/Connect HTTP/1.1
Host: localhost:49815
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost:50739
Access-Control-Request-Method: POST
Access-Control-Request-Headers: access-control-allow-headers,access-control-allow-origin,content-type
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

以下回复:

HTTP/1.1 200 OK
Allow: OPTIONS, TRACE, GET, HEAD, POST
Server: Microsoft-IIS/10.0
Public: OPTIONS, TRACE, GET, HEAD, POST
X-SourceFiles: =?UTF-8?B?RDpcVEZTXElVV2ViXEdhcE5ldFNlcnZlclxBU1BTZXJ2aWNlc1xMb2dpblxDb25uZWN0?=
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: *
Access-Control-Request-Headers: X-Requested-With, accept, content-type
Date: Tue, 01 Sep 2015 13:05:23 GMT
Content-Length: 0

而且,Firefox会使用以下消息阻止请求:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:49815//Login/Connect. (Reason: missing token 'access-control-allow-headers' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

Answer 1

通常情况下,我读过的帖子都提出了几个不必要的配置步骤,这造成了混乱.它实际上非常简单......

出于简单的目的,从角客户端向ASP控制器发送跨站点请求:

• 不需要角度拦截器.
• 服务器端不需要自定义筛选器.

• 唯一的强制修改是在服务器的web.config中添加它

  <system.webServer>
        <httpProtocol>
            <customHeaders>
                <clear />
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Headers" value="Content-Type"/>
            </customHeaders>
       </httpProtocol>
  </system.webServer>
  

Answer 2

问题是*标题不允许使用通配符.(唯一Access-Control-Allow-Headers 允许使用通配符的标头是Access-Control-Allow-Headers.)

因此,该值需要明确列出您要允许的标头的名称.Access-Control-Allow-Headers: Content-Type用一些实际的标题名称替换,然后我认为你会发现它有效.