@Configuration public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:4200")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600);
}
};
}
}
此处,使用了allowedOrigins方法来允许来自特定域名的跨域请求。此外,allowCredentials设置为true允许带上身份验证信息的跨域请求。
在Angular应用程序中,在每个需要进行身份验证的请求中,将keycloak bearer token设置为Authentication header,例如:
let headers = new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + keycloak.token });
this.http.get('/api/data', {headers: headers}).subscribe(data => { console.log(data); });
这样做可以解决angular keycloak bearer token导致的CORS问题。
例如:
@NgModule({ imports: [ HttpClientModule, HttpClientXsrfModule.withOptions({ cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN' }) ], ... }) export class AppModule { }
然后在发送每个HTTP请求时,HttpClient会自动将CSRF令牌添加到请求头中,以确保后端框架可以识别请求。
需要注意的是,使用HttpClientXsrfModule需要后端框架支持cookie-based CSRF保护。如果使用其他类型的CSRF保护机制(例如基于token的保护),则应该考虑其他解决方案。