成熟的遥控器 · 2020年欧洲杯二十四强出炉,分组揭晓!_比赛· 4 月前 · |
玩足球的烈马 · 重磅公布!古巴治疗性乙肝疫苗NASVAC ...· 4 月前 · |
想旅行的遥控器 · 化学竞赛总分 - 抖音· 1 年前 · |
千年单身的马铃薯 · 沈阳地铁2号线南延线、4号线,今年下半年将开 ...· 1 年前 · |
俊逸的仙人球 · 周末电影分级:《有一个地方》13岁以上观看_ ...· 1 年前 · |
是的,我知道你在想什么-又是一个CORS问题,但这一次我被难住了。
因此,首先,实际的错误消息如下:
XMLHttpRequest无法加载 http://localhost/Foo.API/token 。当请求的 凭据模式为'include' 时,响应中的'Access-Control-Allow-Origin‘标头的值不能是通配符'*’。因此不允许访问源' http://localhost:5000 ‘。由withCredentials属性控制XMLHttpRequest发起的请求的凭据模式。
我不确定凭据模式是什么意思是“包含”
因此,当我在postman中执行请求时,我遇到了这样的错误: no :
但是当我通过我的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);
}
首先要感谢大家!
这个问题源于你的Angular代码:
当
withCredentials
设置为true时,它会尝试将凭据或cookies与请求一起发送。由于这意味着另一个源可能正在尝试执行经过身份验证的请求,因此不允许使用通配符("*")作为"Access-Control-Allow- origin“标头。
您必须在"Access-Control-Allow- origin“头中显式地响应发出请求的源,才能使其工作。
我建议明确地将您希望允许进行身份验证请求的来源列入白名单,因为简单地使用请求来源进行响应意味着,如果用户碰巧有一个有效的会话,任何给定的网站都可以对您的后端进行身份验证调用。
我用我前段时间写的 this article 解释了这些东西。
因此,您可以将
withCredentials
设置为false或实现源白名单,并在涉及凭据时使用有效的源来响应CORS请求
为Angular 5和Spring Security定制CORS (基于Cookie的解决方案)
在需要为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核心,则在Startup.CS中配置CORS时必须使用.AllowCredentials()。
ConfigureServices内部
services.AddCors(o => {
o.AddPolicy("AllowSetOrigins", options =>
options.WithOrigins("https://localhost:xxxx");
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowCredentials();