前端配置代理实现前后端代码联调

前端代理

为什么我们要配置前端代理？

对于一个前端开发工程师，我们时刻都要与后端的接口打交道，当我们拿到后端给我们的接口后调用该接口，向后端发送消息，但运行程序后发现出现了跨域问题。

这是因为前后端开发分离，我们希望直接向后端接口请求数据，但因为浏览器自身的跨域限制，前端无法直接让从浏览器发起的请求到达后端的服务器。如下图所示：


这个时候就需要在前端加入一层代理，他会在本地创建一个虚拟服务器，以此我们解决跨域的问题。

那我们如何配置代理呢？

export default defineConfig({
// 配置代理
devServer: {
 https: false,
 proxy: {
   '/api': {  // 代理http://localhost:8080/api/...的所有路由
    target: 'https://172.20.9.153:8085', // 后端服务器地址
    changeOrigin: true, // 允许跨域，会在本地创建一个虚拟服务器
     pathRewrite: {  //重写...api,并将其替换为空
		  "^/api: ""
     }
     }
   },
 },
});

在axios中我们请求url时用法如下：

this.$axios.get("/api/getPointCloud/...")

这样我们就成功解决了跨域的问题！

后端代理

当我们将我们的代码打包发布到服务器上之后，部署到服务器上的代码在请求后端地址时就不会出现浏览器跨域的问题，并且他也不会再根据devServer中的代理配置创建虚拟服务器了。但这时浏览器向后台请求的url还是：

this.$axios.get("/api/getPointCloud/...")

所以后端需要配置相同的代理（换句话来说后端在Nginx中配置的代理需要和前端配置的代理一致）！后端在配置与前端相同的代理后，向后端真实的地址发送请求，成功返回前端所需的数据，完成闭环！