axios全局配置、攔截器和proxy跨域代理怎么實現(xiàn)

這篇文章主要介紹“axios全局配置、攔截器和proxy跨域代理怎么實現(xiàn)”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“axios全局配置、攔截器和proxy跨域代理怎么實現(xiàn)”文章能幫助大家解決問題。

一、全局配置axios

1. 為什么要全局配置 axios

在實際項目開發(fā)中，幾乎每個組件中都會用到 axios 發(fā)起數(shù)據(jù)請求。此時會遇到如下兩個問題：

① 每個組件中都需要導(dǎo)入 axios（代碼臃腫）

② 每次發(fā)請求都需要填寫完整的請求路徑（不利于后期的維護）

2. 如何全局配置 axios

在 main.js 入口文件中，通過 app.config.globalProperties 全局掛載 axios，示例代碼如下：

3.在 vue2 的項目中全局配置 axios

需要在main.js 入口文件中，通過Vue 構(gòu)造函數(shù)的prototype 原型對象全局配置 axios

二、axios 攔截器

1. 什么是攔截器

攔截器（英文：Interceptors）會在每次發(fā)起 ajax 請求和得到響應(yīng)的時候自動被觸發(fā)。

2. 配置請求攔截器

通過 axios.interceptors.request.use(成功的回調(diào), 失敗的回調(diào)) 可以配置請求攔截器。示例代碼如下：

2.1 請求攔截器 – Token 認證

2.2 請求攔截器 – 展示 Loading 效果

借助于element ui 提供的 Loading 效果組件

3. 配置響應(yīng)攔截器

通過 axios.interceptors.response.use(成功的回調(diào), 失敗的回調(diào)) 可以配置響應(yīng)攔截器。示例代碼如下：

展示Loading效果實戰(zhàn)示例：

三、proxy 跨域代理

1. 接口的跨域問題

解決跨域

1）、Cors(最標準的處理) 不需要前段人員做任何處理 只需要寫服務(wù)器的人在服務(wù)器里面在返回響應(yīng)的時候加幾個特殊的響應(yīng)頭

2）、Jsonp 最巧妙的解決辦法  借助了script標簽里面的src屬性 在引入外部資的時候不受同源策略限制這個特點辦到的    在開發(fā)中很少用 因為需要前端+后端人員共同完成 而且也只能解決get請求的跨域問題

3）、代理服務(wù)器

代理服務(wù)器也是個服務(wù)器 它的端口號和我們自身保持一致 兩臺服務(wù)器之間的交流不首同源策略限制 即這樣便可解決跨域問題 所以在發(fā)請求的時候端口號也是8080

vue 項目運行的地址：http://localhost:8080/

API 接口運行的地址：http://www.escook.cn/api/users

由于當前的 API 接口沒有開啟 CORS 跨域資源共享，因此默認情況下，上面的接口無法請求成功！

2. 通過代理解決接口的跨域問題

通過vue-cli 創(chuàng)建的項目在遇到接口跨域問題時，可以通過代理的方式來解決：

① 把 axios 的請求根路徑設(shè)置為vue 項目的運行地址（接口請求不再跨域）

② vue 項目發(fā)現(xiàn)請求的接口不存在，把請求轉(zhuǎn)交給proxy 代理

③ 代理把請求根路徑替換為devServer.proxy 屬性的值，發(fā)起真正的數(shù)據(jù)請求

④ 代理把請求到的數(shù)據(jù)，轉(zhuǎn)發(fā)給 axios

3. 在項目中配置 proxy 代理

步驟1，在main.js 入口文件中，把 axios 的請求根路徑改造為當前web 項目的根路徑：

步驟2，在項目根目錄下創(chuàng)建vue.config.js 的配置文件，并聲明如下的配置：

① devServer.proxy 提供的代理功能，僅在開發(fā)調(diào)試階段生效

② 項目上線發(fā)布時，依舊需要API 接口服務(wù)器開啟 CORS 跨域資源共享

使用方式一配置代理服務(wù)器有兩個不完美的地方：

1、不能靈活的控制走不走代理服務(wù)器

public文件夾相當于8080服務(wù)器的根路徑（8080這臺服務(wù)器里面有什么就取決于public文件夾里有什么）當請求的資源8080自身有的時候  就不會將這個請求轉(zhuǎn)發(fā)至5000服務(wù)器

2、不能夠配置多個代理，只能將請求轉(zhuǎn)發(fā)給5000服務(wù)器

使用方式二開啟代理服務(wù)器  ‘/api’ 請求前綴

作用：當本地請求發(fā)送到代理服務(wù)器時 代理服務(wù)器會來判定 該請求的前綴是不是‘/api’，如果是 則發(fā)送請求（轉(zhuǎn)發(fā)請求至5000），如果不是 則不發(fā)送請求 可以靈活的控制走不走代理服務(wù)器（‘/api’不是固定值，可自定義為‘/hah’ 等）

前綴的攜帶位置：緊跟端口號

如果直接這么請求的話 會導(dǎo)致404錯誤 因為發(fā)送請求到5050服務(wù)器的時候攜帶的還是/api/students, 5050服務(wù)器有students但是沒有/api/students

加上這個配置才能保證代理服務(wù)器發(fā)送到5050服務(wù)器請求時 只發(fā)送了/students 從而拿到數(shù)據(jù)

ws作用：用于支持websocket

changeOrigin：（用于控制請求頭中host的值）

當changeOrigin：true時，代理服務(wù)器會表明自己也是5050服務(wù)器

當changeOrigin：false時，代理服務(wù)器表明自己是8080服務(wù)器

有時候5050服務(wù)器會有些限制 所以這個配置項最好設(shè)置為true。

ws和changeOrigin這兩項如果不寫的話 默認值也是true（在react中不寫為false）

關(guān)于“axios全局配置、攔截器和proxy跨域代理怎么實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。