CORS：凭证模式是'包含' [英] CORS: credentials mode is 'include'

问题描述

是的，我知道你在想什么 - 还有另一个CORS问题，但这次我很难过。

所以要开始，实际的错误信息：

XMLHttpRequest无法加载

但是当我访问相同内容时通过我的angularjs网络应用程序请求，我被这个错误困扰。这是我的angualrjs请求/回复。你会看到响应是 OK 200 ，但我仍然收到CORS错误：

提琴请求和响应：

下图显示了从Web前端到API的请求和响应

因此，基于我在线阅读的所有其他帖子，似乎之类我做对了，这就是我无法理解错误的原因。最后，这是我在angualrjs（登录工厂）中使用的代码：

API中的CORS实现 - 参考目的：

使用的方法1：

  public static class WebApiConfig 
 {
 public static void Register（HttpConfiguration config）
 {
 EnableCrossSiteRequests（config）; 
} 
 
 private static void EnableCrossSiteRequests（HttpConfiguration config）
 {
 var cors = new EnableCorsAttribute（*，*，*）
 {
 SupportsCredentials = true 
}; 
 config.EnableCors（cors）; 
} 
} 
  

使用方法2：

  public void Configuration（IAppBuilder app）
 {
 HttpConfiguration config = new HttpConfiguration（）; 
 
 ConfigureOAuth（app）; 
 
 WebApiConfig.Register（config）; 
 app.UseCors（Microsoft.Owin.Cors.CorsOptions.AllowAll）; 
 app.UseWebApi（con​​fig）; 
 
} 
  

非常感谢提前！

解决方案

问题源于你的Angular代码：

当 withCredentials 设置为true，它正在尝试与请求一起发送凭据或cookie。因为这意味着另一个来源可能尝试进行经过身份验证的请求，因此不允许使用通配符（*）作为Access-Control-Allow-Origin标头。

您必须明确回复在Access-Control-Allow-Origin标题中发出请求的来源才能使其正常工作。

我建议您明确地将您希望允许进行身份验证请求的来源列入白名单，因为只需响应来自请求的来源就意味着如果用户恰好有一个有效的会话，任何给定的网站都可以对您的后端进行经过身份验证的调用。

我在中解释了这些内容。这篇文章我写了一段时间。

所以你可以将 withCredentials 设置为false或者实现原始白名单，并在涉及凭据时响应具有有效来源的CORS请求

Yes, I know what you are thinking - yet another CORS question, but this time I'm stumped.

So to start off, the actual error message:

XMLHttpRequest cannot load http://localhost/Foo.API/token. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:5000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I'm not sure what is meant by credentials mode is 'include'?

So when I perform the request in postman, I experience no such error:

But when I access the same request through my angularjs web app, I am stumped by this error. Here is my angualrjs request/response. As you'll see the response is OK 200, but I still receive the CORS error:

Fiddler Request and Response:

The following image demonstrates the request and response from web front-end to API

So based on all the other posts I've read online, it seems like I'm doing the right thing, that's why I cannot understand the error. Lastly, here is the code I use within angualrjs (login factory):

CORS Implementation in API - Reference purposes:

Method 1 used:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        EnableCrossSiteRequests(config);
    }

    private static void EnableCrossSiteRequests(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("*", "*", "*")
        {
            SupportsCredentials = true
        };
        config.EnableCors(cors);
    }
}

Method 2 used:

public void Configuration(IAppBuilder app)
{
    HttpConfiguration config = new HttpConfiguration();

    ConfigureOAuth(app);

    WebApiConfig.Register(config);
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    app.UseWebApi(config);

}

Many thanks in advance!

解决方案

The issue stems from your Angular code:

When withCredentials is set to true, it is trying to send credentials or cookies along with the request. As that means another origin is potentially trying to do authenticated requests, the wildcard ("*") is not permitted as the "Access-Control-Allow-Origin" header.

You would have to explicitly respond with the origin that made the request in the "Access-Control-Allow-Origin" header to make this work.

I would recommend to explicitly whitelist the origins that you want to allow to make authenticated requests, because simply responding with the origin from the request means that any given website can make authenticated calls to your backend if the user happens to have a valid session.

I explain this stuff in this article I wrote a while back.

So you can either set withCredentials to false or implement an origin whitelist and respond to CORS requests with a valid origin whenever credentials are involved

这篇关于CORS：凭证模式是'包含'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！