CORS:凭证模式是'包含'

Question

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

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

XMLHttpRequest无法加载http://localhost/Foo.API/token.当请求的凭据模式为"include"时,响应中"Access-Control-Allow-Origin"标头的值不能是通配符"*".因此不允许来源' http:// localhost:5000 '访问.XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.

我不确定凭证模式的含义是'包含'？

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

但是当我通过我的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(config);

}

提前谢谢了!

Answer 1

问题源于您的Angular代码:

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

您必须在"Access-Control-Allow-Origin"标头中明确响应发出请求的原点才能使其正常工作.

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

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

因此,您可以设置withCredentials为false或实现原始白名单,并在涉及凭据时响应具有有效来源的CORS请求

Answer 2

如果您正在使用 CORS 中间件并且想要发送withCredentials布尔值 true，您可以像这样配置 CORS：

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

`

Answer 3

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

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

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

Answer 4

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

配置服务内部

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

services.AddMvc();

然后在Configure里面：

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

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