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