後端配置
方式1
@Configuration
public class CorsConfig {
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 是否發送Cookie信息
corsConfiguration.setAllowCredentials(true);
// 允許任何域名
corsConfiguration.addAllowedOrigin(CorsConfiguration.ALL);
// 允許任何頭部信息
corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
// 允許所有請求類型
corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
// 暴露哪些頭部信息（因爲跨域訪問默認不能獲取全部頭部信息）
corsConfiguration.addExposedHeader("Authorization");
// 添加映射路徑
source.registerCorsConfiguration("/**", corsConfiguration);
FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
return bean;
}
}
方式2
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
/**
* 跨域請求處理的接口
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
// 添加映射路徑
registry.addMapping("/**")
//放行哪些原始域
.allowedOrigins(CorsConfiguration.ALL)
// 是否發送Cookie信息
.allowCredentials(true)
// 放行哪些原始域(請求方式)
.allowedMethods(
HttpMethod.GET.name(),
HttpMethod.POST.name(),
HttpMethod.PUT.name(),
HttpMethod.DELETE.name()
)
// 放行哪些原始域(頭部信息)
.allowedHeaders("*")
// 暴露哪些頭部信息（因爲跨域訪問默認不能獲取全部頭部信息）
.exposedHeaders("Authorization");
}
}
前端
根據使用框架不通，設置credentials爲true
vue 語言配置方式
// 使用vue.resource發送請求時配置如下：
// main.js中
Vue.http.options.xhr = { withCredentials: true }
// 使用vue.axios發送請求時配置如下：
axios.defaults.withCredentials = true；
// jquery請求帶上 xhrFields: {withCredentials: true}, crossDomain: true；
$.ajax({
type: "post",
url: "",
xhrFields: {withCredentials: true},
crossDomain: true,
data: {username:$("#username").val()},
dataType: "json",
success: function(data){ }
});