缺少令牌&access-control-allow-headers'在CORS标题' Access-Control-Allow-Headers'来自CORS预检频道

时间:2015-09-01 13:25:52

标签: angularjs asp.net-mvc cors preflight

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

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

    <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);
        }
    }
    
  • 在角度客户端中,我创建了以下拦截器:

    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).

3 个答案:

答案 0 :(得分:29)

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

出于简单的目的,从角客户端向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>
    

答案 1 :(得分:10)

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

因此,该值需要明确列出您要允许的标头的名称。将*替换为一些实际的标题名称,然后我认为您会发现它有效。

答案 2 :(得分:0)

我在角度8的.net c#mvc应用程序和客户端应用程序中尝试过,但无法正常工作。在web.config中,我添加了

<httpProtocol>
  <customHeaders>
    <clear />
    <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
    <add name="Access-Control-Allow-Headers" value="Content-Type"/>
  </customHeaders>
</httpProtocol>

我也在global.axax.cs文件中添加了

    void MvcApplication_AuthenticateRequest(object sender, EventArgs e)
    {
        Context.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200");
    }

,但是它不起作用。在Chrome的响应标头中,确实显示为:

访问控制允许标题:内容类型 访问控制允许来源:http://localhost:4200 访问控制允许来源:http://localhost:4200

,但在请求标头中则显示为

访问控制请求标头:访问控制允许来源,内容类型,x-iphoneclientid

它需要像

x-iphoneclientid:8E72FF50-548B

因为x-iphoneclientid是我在过滤器类中验证为的令牌

    protected override System.Threading.Tasks.Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, System.Threading.CancellationToken cancellationToken)
    {

        if (request == null || request.RequestUri == null)
        {
            return null;
        }
        // Write your Authentication code here
        IEnumerable<string> monsterApiKeyHeaderValues = null;

        // Checking the Header values
        if (request.Headers.TryGetValues("x-iphoneclientid", out monsterApiKeyHeaderValues))

没有找到以上条件,因此它拒绝了它,也没有到达控制器。

我什至已经在我的控制器中放置了

[EnableCors(“ ”,“ ”,“ *”)]

请指导

谢谢