1. 问题
在学习Angular时,使用以下代码发起POST请求,
this.http.post("http://localhost:8899/login", body, {headers: headers})
会出现以下错误提示。
已拦截跨源请求:同源策略禁止读取位于 http://localhost:8899/login 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。
原因是使用得RESTful微服务没有配置跨源CORS设置。
2. 解决
使用Spring Boot的@Configuration和@Bean追加一个基于Filter的CORS配置。使用到的类有:CorsConfiguration和UrlBasedCorsConfigurationSource。
代码如下:
@Configuration public class SecurityCorsConfiguration { @Bean public FilterRegistrationBean corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("http://localhost:4200"); config.addAllowedHeader(CorsConfiguration.ALL); config.addAllowedMethod(CorsConfiguration.ALL); source.registerCorsConfiguration("/**", config); FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source)); bean.setOrder(Ordered.HIGHEST_PRECEDENCE); return bean; } }
以上表示许可来自http://localhost:4200 的所有请求header、请求方法、请求路径。
有无跨源CORS设置时的OPTIONS请求的header,请参照:
https://my.oschina.net/superpeepi/blog/906612
https://my.oschina.net/superpeepi/blog/906620