如何在陀螺匠 PC 端开发环境配置反向代理

在陀螺匠 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 文件后，需要重新启动项目，该配置才能生效。