快捷導(dǎo)航

Vue配置文件中的devServer proxy配置全過程

更新時間：2025年12月17日 09:17:34 作者：小儲今天暴富了

文章介紹了如何在代理服務(wù)器中配置axios請求,包括單個接口和多個接口的情況,通過配置proxy,可以將請求轉(zhuǎn)發(fā)到不同的后端服務(wù)器,并且可以處理跨域請求和路徑重寫

1.如果發(fā)送的請求都以 /abc 開頭

那么我們就可以在proxy中進行服務(wù)器代理配置。

這里以axios發(fā)請求為例

axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");

devServer: {
    host: 'localhost',
    port: 8080,//自定義
    open: true,
    proxy: {
      "/abc": {
        target: "http://XX.XX.XX.XX:8081",
        changeOrigin: true,
        ws: true,
        secure: false,
      },
    },
},

"/abc":{} : 引號中代表監(jiān)測的是以 /abc 開頭的接口
target: 代表監(jiān)測到以 /abc 開頭的接口后，把axios請求中前面的本地服務(wù)器地址改為后端接口地址，實際發(fā)送給后端的請求就是下方后一個請求 http://localhost:8080/abc/def --> http://XX.XX.XX.XX:8081/abc/def
changeOrigin: 是否跨域
ws: 如果要代理 websockets，配置這個參數(shù)
secure: 如果是https接口，需要配置這個參數(shù)（如果是http接口，也可以不寫這個參數(shù)）
pathRewrite：替換請求中匹配的內(nèi)容。上方未使用此參數(shù)

2.代理多個接口

（即發(fā)送的請求不是都以 /abc 開頭，例如下圖）

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

http://localhost:8080/zzz/one
http://localhost:8080/xxx/two

方法1：監(jiān)測多個接口，可以在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,
        },
    },
},

那么實際發(fā)送給后端的請求就是：

http://XX.XX.XX.XX:8082/zzz/one
http://XX.XX.XX.XX:8083/xxx/two

方法2：使用axios進行前設(shè)置（適用于target相同的代理）

// 一般在全局設(shè)置里引入，例如main.js，方便第二行的配置被每一個axios請求識別
import axios from "axios";
// 只要發(fā)送axios請求，就在請求前加入/api的開頭，例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api";

進行了上方的配置后，在本地發(fā)送的請求會變?yōu)?/p>

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

而后可以設(shè)置只監(jiān)聽 "/api" 的代理，不過要設(shè)置pathRewrite參數(shù)：

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

pathRewrite ：檢查代理的請求中是否有 /api ，有的話把 /api 替換為冒號后面的內(nèi)容，案例為替換成空字符串，也就是刪去 /api 。（^是正則表達式的內(nèi)容，意思是限定開頭）