Springboot端的配置
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);
}
}
VUE端配置
Axios.defaults.timeout = 5000
Axios.defaults.baseURL = ApiUrl.baseURL
// Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
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”请求。