快捷導(dǎo)航

Vue配置代理(devServer)解決跨域問(wèn)題

更新時(shí)間：2024年08月10日 10:49:53 作者：藏藍(lán)色攻城獅

這篇文章主要介紹了Vue配置代理(devServer)解決跨域問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1、作用：

Vue官方文檔的解釋是：

如果你的前端應(yīng)用和后端 API 服務(wù)器沒(méi)有運(yùn)行在同一個(gè)主機(jī)上，你需要在開(kāi)發(fā)環(huán)境下將 API 請(qǐng)求代理到 API 服務(wù)器。這個(gè)問(wèn)題可以通過(guò) vue.config.js 中的 devServer.proxy 選項(xiàng)來(lái)配置。

通俗的說(shuō)，就是為了解決跨域問(wèn)題。

2、用法：

本篇都以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://xxx:8080/abc/def

2.1 指定請(qǐng)求開(kāi)頭配置

如果發(fā)送的請(qǐng)求都以 /abc 開(kāi)頭，代理配置：

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

“/abc”:{} : 引號(hào)中代表，本代理配置，會(huì)檢測(cè)以 /abc 開(kāi)頭的訪問(wèn)
target : 代表檢測(cè)到以 /abc 開(kāi)頭的接口后，將請(qǐng)求中端口、地址，修改為后端接口地址，從而避免發(fā)生跨域問(wèn)題
changeOrigin : 是否修改數(shù)據(jù)包中host參數(shù)，默認(rèn)為true
ws : 是否代理 websockets
該代理請(qǐng)求為：

http://localhost:8080/abc/def —> http://XX.XX.XX.XX:8081/abc/def

2.2 代理多個(gè)接口

請(qǐng)求示例：

// http://localhost:8080/zzz/one
axios.get("/zzz/one");
// http://localhost:8080/xxx/two
axios.get("/xxx/two");

代理多接口方式1

監(jiān)測(cè)多個(gè)接口，可以在proxy中寫多個(gè)配置

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,
        },
    },
},

代理多接口方式2

配置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)?
http://localhost:8080/api/zzz/one
http://localhost:8080/api/xxx/two
*/

配置代理

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)頭）

3、常見(jiàn)參數(shù)

target："xxx",            // 要使用url模塊解析的url字符串
forward："xxx",           // 要使用url模塊解析的url字符串
agent：{},                // 要傳遞給http(s).request的對(duì)象
ssl：{},                  // 要傳遞給https.createServer()的對(duì)象
ws：true/false,           // 是否代理websockets
xfwd：true/false,         // 添加x-forward標(biāo)頭
secure：true/false,       // 是否驗(yàn)證SSL Certs
toProxy：true/false,      // 傳遞絕對(duì)URL作為路徑（對(duì)代理代理很有用）
prependPath：true/false,  // 默認(rèn)值:true 指定是否要將目標(biāo)的路徑添加到代理路徑
ignorePath：true/false,   // 默認(rèn)值:false 指定是否要忽略傳入請(qǐng)求的代理路徑
localAddress："xxx",      // 要為傳出連接綁定的本地接口字符串
changeOrigin：true/false, // 默認(rèn)值:false 將主機(jī)標(biāo)頭的原點(diǎn)更改為目標(biāo)URL

到此這篇關(guān)于Vue配置代理(devServer)，解決跨域問(wèn)題的文章就介紹到這了,更多相關(guān)Vue配置代理(內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: