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

更新時間：2024年08月10日 10:49:53 作者：藏藍色攻城獅

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

1、作用：

Vue官方文檔的解釋是：

如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發(fā)環(huán)境下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。

通俗的說，就是為了解決跨域問題。

2、用法：

本篇都以axios發(fā)請求為例,樣例如下：

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

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

2.1 指定請求開頭配置

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

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

“/abc”:{} : 引號中代表，本代理配置，會檢測以 /abc 開頭的訪問
target : 代表檢測到以 /abc 開頭的接口后，將請求中端口、地址，修改為后端接口地址，從而避免發(fā)生跨域問題
changeOrigin : 是否修改數據包中host參數，默認為true
ws : 是否代理 websockets
該代理請求為：

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

2.2 代理多個接口

請求示例：

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

代理多接口方式1

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

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請求，就在請求前加入/api的開頭，例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api"; 
/*
進行了上方的配置后，在本地發(fā)送的請求會變?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 ：檢查代理的請求中是否有 /api ，有的話把 /api 替換為冒號后面的內容，案例為替換成空字符串，也就是刪去 /api 。（^是正則表達式的內容，意思是限定開頭）

3、常見參數

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

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

您可能感興趣的文章: