CORS: 凭证模式是‘ include’

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

首先，实际的错误消息是:

请求不能加载 http://localhost/foo.api/token 响应中的“访问控制-允许-起源”标头的值必须为 当请求的 < strong > 凭据模式为 「包括」因此不能以「 http://localhost:5000」开始 方法发起的请求的凭据模式 XMLHttpRequest 由 withCredentials 属性控制。

我不知道 凭证模式是“包含”是什么意思？

因此，当我在邮递员中执行请求时，我会遇到 没有这样的错误:

enter image description here

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

Fiddler 请求和响应:

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

Fiddler

所以基于我在网上看到的其他帖子，我觉得我做的是对的，这就是为什么我不能理解这个错误。最后，下面是我在 angualrjs (登录工厂)中使用的代码:

enter image description here

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


}
237340 次浏览
小开
最佳答案

这个问题源于你的角度代码:

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

您必须明确地响应在“访问控制-允许-起源”头中的请求的起源，以使此工作。

我建议明确地白名单的起源，你想允许进行认证请求，因为简单地响应来自请求的起源意味着任何给定的网站可以进行认证调用到您的后端，如果用户碰巧有一个有效的会话。

我用 这篇文章解释了这些东西，我前阵子写的。

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

小开

为角度5和弹簧安全定制 CORS (Cookie 基础解决方案)

在角度方面需要添加选项标志 withCredentials: 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.cors()使用 corsConfigurationSource

小开

如果有帮助的话，我用的是离心机和我的 Reactjs 应用程序, 在检查了下面的一些注释之后，我查看了 Centrifuge.js 库文件，在我的版本中，有以下代码片段:

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

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

希望能有帮助！

小开

如果您正在使用 CORS 中间件，并且希望发送 withCredentials布尔值 true，那么您可以像下面这样配置 CORS:

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

小开

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

ConfigureServices 内部

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

对我来说，只是缺少了一些选择。导致您提到的错误的 AllowCredenals ()。对于其他有 CORS 问题的人来说，顺序问题和 AddCors ()必须在启动类中的 AddMVC ()之前注册。


提交答案