CORS：凭据模式为“包含”

Question

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

因此，首先，实际的错误消息：

无法加载XMLHttpRequesthttp://localhost/Foo.API/token.当请求的凭据模式为“include”时，响应中“Access Control Allow Origin”标头的值不得为通配符“*”。“来源”http://localhost:5000因此不允许访问。XMLHttpRequest启动的请求的凭据模式由withCredentials属性控制。

我不确定凭据模式的含义是“包括”？

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

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

Fiddler请求和响应：

下图演示了从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 5和Spring Security定制CORS（基于Cookie的解决方案）

在角度侧，需要为Cookie传输添加带有凭据的选项标志：true

constructor(public http: HttpClient) {
}

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

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

@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）将对http使用corsConfigurationSource。cors（）

Answer 2

如果您使用的是CORS中间件，并且希望发送带有凭据的布尔true，则可以如下配置CORS：

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

Answer 3

问题源于您的Angular代码：

当withCredentials设置为true时，它将尝试随请求发送凭据或cookie。因为这意味着另一个源站可能正在尝试执行经过身份验证的请求，所以不允许通配符（“*”）作为“Access Control Allow origin”标头。

您必须在“Access-Control-Allow-Origin”标头中明确响应发出请求的来源才能执行此操作。

我建议显式地将您希望允许发出经过身份验证的请求的来源列为白名单，因为只要使用来自请求的来源进行响应，就意味着如果用户碰巧有一个有效的会话，任何给定的网站都可以向您的后端发出经过身份验证的调用。

我在不久前写的这篇文章中解释了这件事。

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