在陀螺匠 PC 端的開發過程中，前端 Vue 項目常常需要調用本地或遠端的后端接口。如果直接請求后端端口，往往會遇到跨域問題，或者導致接口地址在開發環境和生產環境不一致。

為了解決這個問題，有兩種方案，一是在服務端接口上增加跨域相關配置，二是在 Vue 開發環境中配置反向代理。由于方式二更簡便且更可控，因此我們采用第二種方式來配置。

由于陀螺匠 PC 端使用的是 Vue CLI，因此我們在 vue.config.js 中修改 devServer.proxy 字段內容即可：

    proxy: {
      "^/api": {
        target: "http://your.domain",
        changeOrigin: true
      },
      "^/uploads": {
        target: "http://your.domain",
        changeOrigin: true
      },
      "^/ws": {
        target: "http://your.domain",
        changeOrigin: true,
        ws: true
      }
    }

上述三個配置項中，第一個配置項實現了對 api 接口的反向代理，第二個接口則實現了對服務端靜態資源文件的反向代理，第三個接口則實現了對 WebSocket 配置的反向代理。

使用時，需要將 http://your.domain 替換為實際使用的域名，同時保持根目錄下 .env 文件中的 VUE_APP_BASE_API 為空；這樣一來瀏覽器會將請求發送到本地的反向代理服務器，反向代理服務器再將請求轉發到真實的服務端接口，如此一來便規避了跨域的問題。

需要注意的是，修改完 vue.config.js 文件后，需要重新啟動項目，該配置才能生效。