使用Spring Boot的跨源CORS設置

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