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;
	}

}