当Okta用于保护API访问时,即使在控制器上放置@CrossOrigin(“*”),从localhost:4200的angular应用到localhost:8080的spring Boot 应用的跨域调用也会被阻止。
下面是开发者控制台中的错误:
- CORS策略已阻止从源'http://localhost:4200'访问http://localhost:8080/api/messages处的XMLHttpRequest:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。*
下面是angular应用程序的代码,它向后端发出GET请求,并在头部中包含访问令牌。
getMessages(): Observable<Message[]>{
const apiUrl = 'http://localhost:8080/api/messages';
const accessToken = this.oktaAuth.getAccessToken();
const headers = new HttpHeaders({'Authorization': 'Bearer ' + accessToken, 'Access-Control-Allow-Origin': 'http://localhost:4200'});
return this.http.get<Message[]>(apiUrl, {headers: headers});
}
字符串
前端和后端都集成了Okta身份验证。
如果从POM中删除了spring Boot Okta starter依赖项,则可以使用放置在控制器处的@CrossOrigin(“”)进行跨域调用。但是如果POM中包含Sping Boot Okta starter,@CrossOrigin(“”)将无法工作。看起来OKta正在响应来自浏览器的预检请求。
已尝试按照https://developer.okta.com/docs/guides/enable-cors/main/启用CORS,并在“受信任的来源”(类型CORS)中列出http://localhost:4200。但这不起作用。Okta说Trusted Origins配置不适用于OAuth2。这似乎是一个常见的场景。但是我在网上找不到一个有效的解决方案。有人对此有解决方案吗?谢啦,谢啦
已尝试按照https://developer.okta.com/docs/guides/enable-cors/main/启用CORS
1条答案
按热度按时间aij0ehis1#
将Angular应用配置为(公共)OAuth2客户端不再被认为是最佳实践。这适用于所有基于JavaScript的框架。如果你用浏览器调试工具查看Gmail、Facebook、Linkedin、Github等,你不会在
Authorization
头中找到一个带有Bearer
令牌的请求(你只会找到会话cookie)。其原因是BFF模式:(机密)OAuth2客户端是服务器上的中间件,负责向浏览器和JavaScript代码隐藏令牌。浏览器和这个中间件之间的请求通过会话(以及针对CSRF的保护)来保护。在将请求转发到下游资源服务器之前,BFF在会话中用OAuth2令牌替换会话cookie。
现在你的CORS点:如果这个中间件被用来代理你的Angular应用和REST API,那么,从浏览器的Angular 来看,所有的请求都将具有相同的起源,并且你的CORS错误将消失。
如果将
spring-cloud-gateway
配置为OAuth2客户端并在路由到Spring资源服务器时添加TokenRelay=
过滤器,则可以将其用作BFF。我写了一个完整的教程there。