【开发日志】解决前后端分离架构开发时 Chrome samesite 跨域问题 （基于 Vue 配置）

问题背景

由于项目使用前后端分离架构，开发时前端项目跑在一个服务器，后端项目跑在另一个服务器，所以存在跨域问题。虽然通过 Spring 的配置也可以从后端解决跨域存在的问题，
但是并不治本，而且 Chrome 的 samesite 总是会让 set-cookie 失效。

解决方法

使用 vue-cli 进行开发时，可以在前端的服务器进行请求代理，前端的请求不再直接访问后端服务器，而是访问前端自己的服务器，由前端服务器将请求转发到后端，从而从根本上避免了跨域的问题。
和 Nginx 反向代理是同一种策略。
具体方法：

1. 首先在 Vue 项目的根目录添加 vue-config.js 配置文件（直接新建一个空文件就可）
   
2. 在 vue-config.js 中添加以下代码：

module.exports = {
  devServer: {
      proxy : {
          'api': {
              target: "http://192.168.1.103:8080",
              changeOrigin: true,
              pathRewrite: {
                  "^/api": "",
              }
          }
      }
  }
}

3. 修改前端向后端发起请求的 URL：
   之前前端直接访问后端进行跨域访问的请求地址为：

serverUrl: "http://192.168.1.103:8080"

现在修改为：

serverUrl: "/api"

4. 大功告成！
   前端请求会先发送给同源的前端 web server，然后将地址重写为后端的地址进行请求。问题解决。
   另外注意一点，将 target 写成本机局域网 ip 地址可以方便其他设备进行调试。