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 : 是否修改數(shù)據(jù)包中host參數(shù)，默認為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、常見參數(shù)

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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

解決vue+ element ui 表單驗證有值但驗證失敗問題
這篇文章主要介紹了vue+ element ui 表單驗證有值但驗證失敗，本文通過實例代碼給大家分享解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01
vue實現(xiàn)無縫輪播效果(跑馬燈)
這篇文章主要為大家詳細介紹了vue實現(xiàn)無縫輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
vue3手動刪除keepAlive緩存的方法
當我們未設置keepAlive的最大緩存數(shù)時,當緩存組件太多,會導致內存溢出,本文給大家介紹了vue3手動刪除keepAlive緩存的方法,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2024-03-03
vue3渲染函數(shù)(h函數(shù))的變更剖析
這篇文章主要介紹了vue3渲染函數(shù)(h函數(shù))的變化,文中給大家介紹了h函數(shù)的三個參數(shù)詳細說明及vue3 h函數(shù)-綁定事件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
VUE div click無效的問題及解決
這篇文章主要介紹了VUE div click無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue+vuex+axios+echarts畫一個動態(tài)更新的中國地圖的方法
本篇文章主要介紹了vue+vuex+axios+echarts畫一個動態(tài)更新的中國地圖的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
vue使用一些外部插件及樣式的配置代碼
這篇文章主要介紹了vue使用一些外部插件及樣式的配置代碼,本文分步驟實例圖文相結合給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-11-11
vue3開啟攝像頭并進行拍照的實現(xiàn)示例
本文主要介紹了vue3開啟攝像頭并進行拍照的實現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個API來實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
2024-01-01
Vue中設置el-select的高度不生效問題及解決方案
文章介紹了如何使用ElementUI框架中的el-select組件,并解決設置其高度不生效的問題,在Vue2.x中,使用/deep/關鍵字可以穿透組件作用域修改樣式；在Vue2.6+到Vue3初期,推薦使用::v-deep關鍵字；在最新的Vue3和構建工具中,推薦使用:deep()偽類來代替::v-deep
2025-01-01
vue2項目導出操作實現(xiàn)方法(后端接口導出、前端直接做導出)
這篇文章主要給大家介紹了關于vue2項目導出操作實現(xiàn)方法的相關資料,文中介紹的是后端接口導出、前端直接做導出,通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-05-05