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

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

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

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

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

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

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