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

问题描述

是的，我知道你在想什么——又是一个 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 无法加载 http://localhost/Foo.API/token.这响应中Access-Control-Allow-Origin"标头的值必须当请求的 凭据模式为时，不是通配符 '*''包括'.因此，不允许使用 Origin 'http://localhost:5000'使用权.发起请求的凭证模式XMLHttpRequest 由 withCredentials 属性控制.

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.

我不确定凭据模式是包含"是什么意思?

所以当我在邮递员中执行请求时，我遇到no这样的错误:

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

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

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:

提琴手请求和响应:

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

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

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

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

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

CORS Implementation in API - Reference purposes:

使用的方法一:

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(config);

}

推荐答案

问题源于您的 Angular 代码:

The issue stems from your Angular code:

当 withCredentials 设置为 true 时，它​​会尝试将凭据或 cookie 与请求一起发送.由于这意味着另一个来源可能正在尝试执行经过身份验证的请求，因此不允许将通配符 ("*") 作为 "Access-Control-Allow-Origin" 标头.

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.

您必须在Access-Control-Allow-Origin"标头中明确响应发出请求的来源才能使这项工作正常进行.

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.

因此，您可以将 withCredentials 设置为 false 或实施来源白名单，并在涉及凭证时使用有效来源响应 CORS 请求

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屋！