Vue配置文件中的devServer proxy配置方式详解

1.如果发送的请求都以 /abc 开头，那么我们就可以在proxy中进行服务器代理配置.这里以axios发请求为例

axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");
devServer: {
    host: 'localhost',
    port: 7080,//自定义
    open: true,
    proxy: {
      "/abc": {
        target: "http://XX.XX.XX.XX:8080",
        changeOrigin: true,
        ws: true,
        secure: false,
      },
    },
},

“/abc”:{} : 引号中代表监测的是以 /abc 开头的接口
target : 代表监测到以 /abc 开头的接口后，把axios请求中前面的本地服务器地址改为后端接口地址，实际发送给后端的请求就是下方后一个请求
http://localhost:7080/abc/def --> http://XX.XX.XX.XX:8080/abc/def。
一旦 devServer(7080)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(8080)。
changeOrigin : 是否跨域，是否改变请求的源地址。例如，当前项目是localhost:7080,代理是localhsot:8080,在真实请求服务器时，服务器会检查源头在哪；
如果不加changeOrigin,那么服务器会看到header里localhost:7080/api/moment,而不是8080。
我试了，Request Headers里边的Host、Referer并没有变化。
ws : 如果要代理 websockets，配置这个参数
secure : 如果是https接口，需要配置这个参数（如果是http接口，也可以不写这个参数）
pathRewrite ：替换请求中匹配的内容。上方未使用此参数

2.代理多个接口（ 即发送的请求不是都以 /abc 开头，例如下图）

axios.get("/zzz/one");
axios.get("/xxx/two");

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

方法1：监测多个接口，可以在proxy中写多个配置：（适用于target不同的代理）

devServer: {
    proxy: {
        "/zzz": {
          target: "http://XX.XX.XX.XX:8082",
          changeOrigin: true,
          ws: true,
        },
        "/xxx": {
          target: "http://XX.XX.XX.XX:8083",
          changeOrigin: true,
          ws: true,
        },
    },
},

那么实际发送给后端的请求就是：

http://XX.XX.XX.XX:8082/zzz/one

http://XX.XX.XX.XX:8083/xxx/two

方法2：使用axios进行前设置（适用于target相同的代理）

// 一般在全局设置里引入，例如main.js，方便第二行的配置被每一个axios请求识别
import axios from "axios";
// 只要发送axios请求，就在请求前加入/api的开头，例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api";    

进行了上方的配置后，在本地发送的请求会变为

http://localhost:8080/api/zzz/one

http://localhost:8080/api/xxx/two

而后可以设置只监听 “/api” 的代理，不过要设置pathRewrite参数：

devServer: {
    proxy: {
        "/api": {
            target: "http://XX.XX.XX.XX:8084",
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": "",
            },
        },
    },
},

pathRewrite ：检查代理的请求中是否有 /api ，有的话把 /api 替换为冒号后面的内容，案例为替换成空字符串，也就是删去 /api 。（^是正则表达式的内容，意思是限定开头）

本地请求 http://localhost:8080/api/zzz/one ->

代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one ->

设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one

所以代理完成后真正发送给后端的请求就是 http://XX.XX.XX.XX:8084/zzz/one
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_53474595/article/details/127746519