快捷導(dǎo)航

Vue配置文件中的proxy配置方式詳解

更新時(shí)間：2022年06月15日 09:23:21 作者：一水壺

今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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

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

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

devServer: {
    proxy: {
      "/abc": {
        target: "http://XX.XX.XX.XX:8081",
        changeOrigin: true,
        ws: true,
        secure: false,
      },
    },
},

"/abc":{} : 引號(hào)中代表監(jiān)測(cè)的是以 /abc 開頭的接口
target : 代表監(jiān)測(cè)到以 /abc 開頭的接口后，把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接口，也可以不寫這個(gè)參數(shù)）
pathRewrite ：替換請(qǐng)求中匹配的內(nèi)容。在3的方法2中詳細(xì)解釋用法，上方未使用此參數(shù)

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

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

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

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

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的開頭，例如 /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)聽 "/api" 的代理，不過要設(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)容，意思是限定開頭）

本地請(qǐng)求 http://localhost:8080/api/zzz/one ->

代理后請(qǐng)求 http://XX.XX.XX.XX:8084/api/zzz/one ->

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

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

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

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

總結(jié)

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

您可能感興趣的文章: