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

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

由于陀螺匠 PC 端使用的是 Vue CLI，因此我們?cè)?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
      }
    }

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

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

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