SpringBoot 前后端分离跨域及 session 不同问题-CFANZ编程社区

后端配置

方式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){ }
});

参考链接

【Spring-boot】前后端分离跨域以及session问题
解决前后端分离 vue+springboot 跨域 session+cookie失效问题