CORS:凭据模式为“包括" [英] CORS: credentials mode is 'include'

问题描述

是的，我知道你在想什么 - 又一个 CORS 问题，但这次我被难住了.

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

<块引用>

XMLHttpRequest 无法加载

但是当我通过我的 angularjs Web 应用程序访问相同的请求时，我被这个错误难住了.这是我的 angualrjs 请求/响应.正如您将看到的响应是 OK 200，但我仍然收到 CORS 错误:

Fiddler 请求和响应:

下图展示了Web前端对API的请求和响应

因此，根据我在网上阅读的所有其他帖子，似乎我在做正确的事情，这就是我无法理解错误的原因.最后，这是我在 angualrjs(登录工厂)中使用的代码:

API 中的 CORS 实现 - 参考用途:

使用的方法1:

公共静态类WebApiConfig{公共静态无效注册(HttpConfiguration 配置){EnableCrossSiteRequests(config);}私有静态无效 EnableCrossSiteRequests(HttpConfiguration 配置){var cors = new EnableCorsAttribute("*", "*", "*"){SupportsCredentials = true};config.EnableCors(cors);}}

使用的方法2:

public void Configuration(IAppBuilder app){HttpConfiguration config = new HttpConfiguration();配置OAuth(app);WebApiConfig.Register(config);app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);app.UseWebApi(config);}

非常感谢！

解决方案

问题源于您的 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屋！