Vue + Spring boot 跨域、传参和数据相关解决方案

前言

在 Vue + Spring boot 的前后分离项目中遇到的跨域、传参和数据问题，记录解决思路和方案

遇到的问题：

1. 跨域
2. Cookie丢失
3. Preflight的处理
4. 后台接收不到文件
5. 数据跨页面共享及刷新页面数据丢失

---

跨域

何为跨域 ？简单的说当前网站向另一个网站请求数据就是跨域。在前后分离的项目中很容易就遇到下图的情况

这里只要用上 @CrossOrigin的注解就好，例

@RestController
@RequestMapping("/test")
@CrossOrigin(origins = {
   "http://127.0.0.1:8088"})  // 填前端地址
public class TestController {
   
}

---

Cookie丢失

解决了跨域后前后端可以通信了，不过这时你会发现后台设置的Cookie在前端都没存下来，这是因为Vue使用的axios发起请求时默认是不带Cookie的，配置一下：

axios.defaults.withCredentials = true;

不过这时又会被跨域拦住：

上图主要是说：

The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

这时需要后台对response头部做一些赋值，例：

@PostMapping("/login")
public ResultVO login(LoginForm form