Vue配置文件中的devServer proxy配置全過(guò)程

更新時(shí)間：2025年12月17日 09:17:34 作者：小儲(chǔ)今天暴富了

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

1.如果發(fā)送的請(qǐng)求都以 /abc 開(kāi)頭

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

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

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

2.代理多個(gè)接口

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

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

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

方法1：監(jiān)測(cè)多個(gè)接口，可以在proxy中寫(xiě)多個(gè)配置：（適用于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,
        },
    },
},

那么實(shí)際發(fā)送給后端的請(qǐng)求就是：

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

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

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

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

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

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

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

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