session跨域问题

Question

session跨域问题
1.前端代码

import  axios from 'axios'
const request =axios.create({
    baseURL:'http://127.0.0.1:8081/api',
    timeout:3600000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config=>{
    config.headers['Content-Type']='application/json;charset=utf-8';
    const user=localStorage.getItem("user");
    if(user){
        config.headers['token']=JSON.parse(user).token;
    }
    //config.headers['token']=user.token; //设置请求头
    return config},error => {
    return Promise.reject(error)
});

//response 拦截器
//可以在接口响应后统一处理结果
request.interceptors.response.use(
    Response=>{
        let res =Response.data;
        if(typeof  res ==='string'){
            res =res  ? json.parse(res):res
        }
        return res;
    },
    error => {
        console.log('err'+error)
        return Promise.reject(error)
    }
)
export default request

2.后端跨域设置

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter(){
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource=new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration=new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);
        return  new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

我按照网上的设置 在前端配置了 axios.defaults.withCredentials = true 还是不行
存储的session和访问的session不一致

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】： 您提问的目的是解决在使用Vue.js作为前端框架和Spring Boot作为后端服务时，遇到的session跨域问题。您希望通过配置前端请求和后端跨域设置来实现不同域之间的安全通信。

【问题出现原因】：

1. 前端跨域配置：您已经尝试通过设置axios.defaults.withCredentials = true来允许跨域请求携带凭证（如cookies），但问题依旧存在。
2. 后端跨域设置：您的后端使用了Spring Boot的CorsFilter来配置跨域资源共享，允许所有域名、所有头和所有HTTP方法进行请求。

问题可能出现的原因包括但不限于：

• 后端服务器没有正确处理带有凭证的跨域请求。
• 前端请求的域名、端口或其他属性与后端配置的不一致。
• 浏览器安全策略限制了跨域请求携带凭证。

【问题解决方案】：

1. 确保后端正确处理凭证：检查后端服务是否能够正确解析和验证前端发送的凭证（如JWT token）。
2. 调整前端请求配置：确保前端请求的URL与后端服务的域名和端口匹配。
3. 调整后端跨域配置：不要使用通配符"*"来允许所有域名，而是明确指定允许的域名，以提高安全性。

【提供代码】： 对于前端，您的代码看起来已经配置了凭证。确保localStorage中的user对象包含token属性，并且该属性的值是正确的。

对于后端，您应该明确指定允许的域名，而不是使用"*"。以下是修改后的后端跨域配置代码示例：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter(){
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true); // 允许携带凭证
        corsConfiguration.addAllowedOrigin("http://your-frontend-domain.com"); // 替换为您的前端域名
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

【代码运行方式】：

1. 将修改后的后端代码部署到您的Spring Boot服务器。
2. 确保您的前端应用指向正确的后端服务地址。
3. 在浏览器中运行您的前端应用，并尝试发起跨域请求。

【代码预期运行结果】：

• 前端应用能够成功地向后端服务发起跨域请求，并且请求携带了凭证。
• 后端服务能够接收并验证前端发送的凭证，处理请求并返回响应。

【推荐相关链接】：

• MDN关于CORS的文档
• Spring Boot官方文档关于CORS的支持
• Axios官方文档关于跨域请求