SpringBoot+Vue3项目跨域配置及Set-Cookie:SameSite=Lax 问题

SpringBoot+Vue3项目跨域配置及Set-Cookie:SameSite=Lax 问题

背景：项目采用SpringBoot2.x+Vue3。使用axios进行路由跳转访问后端接口时出现 跨域 和 未携带Cookie 问题。
解决跨域有很多方法，我使用配置后端注解@CrossOrigin来解决跨域问题（此时没有传入任何参数）

添加@CrossOrigin但是没有解决跨域问题

@CrossOrigin
public class UserController {
	//你的controller内容
}

1
2
3
4
5

添加注解后发现跨域问题并没有被解决，发现前端myAxios.ts（axios配置文件）文件中之前配置了withCredentials为true，由于规定withCredentials为true表示允许前端携带凭证，后端origins不能为“ * ” ，而后端origins不配置默认为“ * ” 。故还是会报上面的错误。我这里的解决方法是之间把withCredentials注释掉了。跨域问题解决了。

前端axios发送请求未携带Cookie问题

这个问题就是我刚刚把withCredentials注释掉导致的。axios默认不携带Cookie，需要开启withCredentials：

const myAxios: AxiosInstance = axios.create({
    withCredentials: true,
    baseURL: 'http://localhost:8080/api',
    timeout: 5000000
});
1
2
3
4
5

同时后端也要配置origins，来接收凭证：

@CrossOrigin(origins = "http://127.0.0.1:5173/(这里写你的前端地址)", allowCredentials = "true")
public class UserController {
	//你的controller内容
}

1
2
3
4
5

Set-Cookie:SameSite=Lax 问题

解决方法：Set-Cookie:SameSite=Lax 问题
测试，前后端联调成功，数据请求正常

后端接口返回数据失败（未带Cookie导致），axios无限刷新闪屏

在未携带Cookie的情况下请求后端接口返回数据失败后，我的也面自动刷新，导致了页面无限刷新的情况。这里是我在myAxios.ts中写了如果请求错误，就进行Window Location href，导致页面刷新陷入循环。

最后

Set-Cookie:SameSite=Lax 问题好像只出现了一次，第一次测试成功后，我尝试删除了SessionConfig 配置类，发现也可以正常携带Cookie