Vue3 proxy跨域代理

一、跨域问题 

        假设vue项目的运行地址为：http://localhost:5173，·此时我们想要调用后端服务的rest api，而后端接口暴露的地址为：https://192.168.1.1:8080/user。

        可以发现前端服务与后端服务的域名是不同的，默认情况下，即使运行前后端服务的两台主机在同一网段内，前端应用是无法从后端服务成功请求到数据的。

        对于这种跨域问题，有两种解决方法，一是让后端服务主动开启CORS跨域资源共享；二是在前端配置一下proxy代理。既然前后端主机在同一网段内，那本身是可以相互ping通的，配置proxy代理相当于代理服务器代替前端向后端应用发送请求，然后把请求到的数据转交给前端应用。

        关于跨域问题，感觉还涉及到很多协议问题等等知识，有时间再研究吧。

二、Vue3配置proxy代理

        找到Vue3项目中的vite.config.ts/vite.config.js文件，新增如下内容

  // 配置跨域请求的代理服务器
  server: {
    proxy: {
      "/api": {
        target: "http://192.168.1.1:8080",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

         配置好后，比如我们想要请求http://192.168.1.1:8080/user/getNum这个api的资源，那按照如下格式写代码就可以了：

const reponse = await axios.get("/api/user/getNum");

根据vite.config.ts/vite.config.js中的配置，代理会自动帮我们把请求url中的/api替换成http://192.168.1.1:8080，最终代理会把成功请求到的数据返回给Vue前端。