CORS：凭据模式为“包含”答案

【问题标题】：CORS: credentials mode is 'include'CORS：凭据模式为“包含”
【发布时间】：2017-08-05 19:35:17
【问题描述】：

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

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

XMLHttpRequest 无法加载 http://localhost/Foo.API/token。这响应中“Access-Control-Allow-Origin”标头的值必须当请求的 凭据模式为时，不是通配符 '*' '包括'。因此，不允许使用 Origin 'http://localhost:5000' 使用权。发起请求的凭证模式 XMLHttpRequest 由 withCredentials 属性控制。

我不确定凭据模式是“包含”是什么意思？

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

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

提琴手请求和响应：

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

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

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

使用的方法一：

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

}

【问题讨论】：

漂亮的图片，它们是什么？要回答您的问题，如果您包含身份验证，则 access-control-allow-origin 响应必须是原始（浏览器页面）主机，它不能是* - 所以，服务器端做错了 CORS - 哦，邮递员可以工作，因为它不是跨源请求
@JaromandaX，感谢您的回复。图片展示了请求/响应以及正在传递的标头。你问这个问题，显然表明它没有达到它的目标......
我的评论应该是你需要知道的全部 - 不需要看图片
所以最近我决定在我的 web api 上放弃 cookie，而是使用令牌。当我使用 cookie 时，我的 CORS 可以正常工作。所以我很难理解 CORS 是如何在服务器端正确实现的
如果包含身份验证，access-control-allow-origin 响应必须是原始（浏览器页面）主机，不能是*

标签： javascript c# angularjs cors asp.net-web-api2

【解决方案1】：

问题源于您的 Angular 代码：

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

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

我建议将您希望允许发出经过身份验证的请求的来源明确列入白名单，因为只需使用来自请求的来源进行响应意味着任何给定的网站都可以在用户碰巧有一个有效的会话。

我在this article 中解释了这些东西，我之前写过。

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

【讨论】：

我正在使用 TypeScript 开发 Angular 5 应用程序。我需要将 withCredentials 设为 true，否则我将收到 Authorization Failed 异常。如何用Credentials解决这个问题：true
@Ziggler 我也有同样的情况。你找到解决方案了吗？
@Ziggler 我罚款解决方案看我的答案。
我在使用 WithCredentials=TRUE 和 Access-Control-Allow-Origin=['localhost:4200'] 时仍然收到此错误，并且我没有使用星 *，因此错误消息不再有意义。错误消息：“对预检请求的响应未通过访问控制检查：当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符*。来源'localhost:4200' 因此不允许访问。由 XMLHttpRequest 发起的请求的凭据模式由 withCredentials 属性控制。"
@mruanova 你确定在请求中正确设置了 Access-Control-Allow-Origin 标头吗？听起来好像在某处发送了带有通配符的东西

【解决方案2】：

如果你正在使用 CORS 中间件并且你想发送 withCredentials boolean true，你可以像这样配置 CORS：

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:5000'}));

`

【讨论】：

【解决方案3】：

为 Angular 5 和 Spring Security 定制 CORS（基于 Cookie 的解决方案）

在 Angular 方面需要为 Cookie 传输添加选项标志 withCredentials: true：

constructor(public http: HttpClient) {
}

public get(url: string = ''): Observable<any> {
    return this.http.get(url, { withCredentials: true });
}

在 Java 服务器端需要添加 CorsConfigurationSource 以配置 CORS 策略：

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        // This Origin header you can see that in Network tab
        configuration.setAllowedOrigins(Arrays.asList("http:/url_1", "http:/url_2")); 
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        configuration.setAllowedHeaders(Arrays.asList("content-type"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()...
    }
}

方法configure(HttpSecurity http)默认使用corsConfigurationSource作为http.cors()

【讨论】：

【解决方案4】：

如果您使用的是 .NET Core，则在 Startup.CS 中配置 CORS 时必须使用 .AllowCredentials()。

ConfigureServices 内部

services.AddCors(o => {
    o.AddPolicy("AllowSetOrigins", options =>
    {
        options.WithOrigins("https://localhost:xxxx");
        options.AllowAnyHeader();
        options.AllowAnyMethod();
        options.AllowCredentials();
    });
});

services.AddMvc();

然后在配置里面：

app.UseCors("AllowSetOrigins");
app.UseMvc(routes =>
    {
        // Routing code here
    });

对我来说，只是缺少 options.AllowCredentials() 导致了您提到的错误。对于其他也有 CORS 问题的人来说，一般来说，订单很重要，并且 AddCors() 必须在您的 Startup 类中的 AddMVC() 之前注册。

【讨论】：

【解决方案5】：

如果有帮助，我在我的 reactjs 应用程序中使用了离心机，并且，在检查了下面的一些 cmets 之后，我查看了 centrifuge.js 库文件，在我的版本中，该文件具有以下代码 sn-p：

if ('withCredentials' in xhr) {
 xhr.withCredentials = true;
}

在我删除这三行后，应用程序运行良好，正如预期的那样。

希望对你有帮助！

【讨论】：