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

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

axios發(fā)送的請求是本地的服務(wù)器地址拼接上發(fā)送的請求，如 http://localhost:8080/abc/def

2. 如果發(fā)送的請求都以 /abc 開頭，那么我們就可以在proxy中進行服務(wù)器代理配置。

devServer: {
    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)容。在3的方法2中詳細(xì)解釋用法，上方未使用此參數(shù)

3. 代理多個接口

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

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

方法1：監(jiān)測多個接口，可以在proxy中寫多個配置：（適用于target不同的代理，相同也可以用這個方法，就是會麻煩一點，對于相同的target方法2會比較方便）

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 。（^是正則表達(dá)式的內(nèi)容，意思是限定開頭）

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

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

設(shè)置pathRewrite后的請求 http://XX.XX.XX.XX:8084/zzz/one

所以代理完成后真正發(fā)送給后端的請求就是 http://XX.XX.XX.XX:8084/zzz/one 啦。

（1.統(tǒng)一給請求添加/api方便監(jiān)測代理 2.統(tǒng)一刪去/api發(fā)送正確的請求）

注意：小伙伴們可能會看到瀏覽器中右鍵檢查打開的控制臺中，網(wǎng)絡(luò)->標(biāo)頭->常規(guī)，中的請求網(wǎng)址顯示的還是 http://XX.XX.XX.XX:8084/api/zzz/one 。這是因為瀏覽器的同源策略，經(jīng)過代理設(shè)置的請求發(fā)送給后端已經(jīng)變成 http://XX.XX.XX.XX:8084/zzz/one 沒有/api 的形式了，不用被瀏覽器顯示的請求網(wǎng)址干擾。如果實在不想看到瀏覽器的請求網(wǎng)址中有api，可以采用方法1。

總結(jié)

到此這篇關(guān)于Vue配置文件中的proxy配置方式的文章就介紹到這了,更多相關(guān)Vue配置文件proxy配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論