web端vue項目跨域避免options請求

vue項目前端配置：

Axios.defaults.timeout = 10000
Axios.defaults.baseURL = ApiUrl.baseURL
Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Axios.defaults.withCredentials = true

// http request 攔截器
Axios.interceptors.request.use(
  config => {
    config.headers = {
      'Content-Type': 'application/json' //  注意：設置很關鍵 
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

特別注意：

在處理跨域問題時候springboot添加配置類后就可以很好的解決，但是會出現在get、post請求前會有一個options請求先去“探路”， 導致axios請求獲取不到數據，所以需要添加一個請求前置攔截器使得前后請求的頭部保持一致，這樣配置就可以跨域，並且可以避免出現跨域是出現的“OPTIONS”請求。

---------------------------------------------------------------------------------------------

java端配置：

添加一個跨域請求的配置類

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CustomCORSConfiguration {
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); // 允許任何的head頭部
        corsConfiguration.addAllowedOrigin("*"); // 允許任何域名使用
        corsConfiguration.addAllowedMethod("*"); // 允許任何的請求方法
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    // 添加CorsFilter攔截器，對任意的請求使用
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}