CORS:凭据模式为“包括”

IT技术 javascript c# angularjs cors asp.net-web-api2
2021-03-21 16:53:50

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

因此,首先,实际的错误消息是:

XMLHttpRequest 无法加载http://localhost/Foo.API/token当请求的凭据模式为 'include'时,响应中 'Access-Control-Allow-Origin' 标头的值不能是通配符 '* '因此,不允许访问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);

}

提前谢谢了!

5个回答

问题源于您的 Angular 代码:

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

您必须在“Access-Control-Allow-Origin”标头中使用发出请求的源明确响应才能使其工作。

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

我在不久前写的这篇文章中解释了这些东西

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

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

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

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

`

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

如果您使用 .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();

然后在配置内部:

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

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

如果有帮助,我在我的 reactjs 应用程序中使用了离心机,并且在检查了下面的一些评论后,我查看了离心机.js 库文件,在我的版本中,它具有以下代码片段:

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

删除这三行后,该应用程序运行正常,正如预期的那样。

希望能帮助到你!