問題背景

由於專案使用前後端分離架構，開發時前端專案跑在一個伺服器，後端專案跑在另一個伺服器，所以存在跨域問題。雖然通過 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 地址可以方便其他裝置進行除錯。