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

創(chuàng)新互聯(lián)建站是一家專業(yè)提供遵義企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為遵義眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

一、全局配置axios

1. 為什么要全局配置 axios

在實(shí)際項(xiàng)目開發(fā)中，幾乎每個(gè)組件中都會(huì)用到 axios 發(fā)起數(shù)據(jù)請(qǐng)求。此時(shí)會(huì)遇到如下兩個(gè)問(wèn)題：

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

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

2. 如何全局配置 axios

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

3.在 vue2 的項(xiàng)目中全局配置 axios

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

二、axios 攔截器

1. 什么是攔截器

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

2. 配置請(qǐng)求攔截器

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

2.1 請(qǐng)求攔截器 – Token 認(rèn)證

2.2 請(qǐng)求攔截器 – 展示 Loading 效果

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

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

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

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

三、proxy 跨域代理

1. 接口的跨域問(wèn)題

解決跨域

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

2）、Jsonp 最巧妙的解決辦法  借助了script標(biāo)簽里面的src屬性 在引入外部資的時(shí)候不受同源策略限制這個(gè)特點(diǎn)辦到的    在開發(fā)中很少用 因?yàn)樾枰岸?后端人員共同完成 而且也只能解決get請(qǐng)求的跨域問(wèn)題

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

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

vue 項(xiàng)目運(yùn)行的地址：http://localhost:8080/

API 接口運(yùn)行的地址：http://www.escook.cn/api/users

由于當(dāng)前的 API 接口沒(méi)有開啟 CORS 跨域資源共享，因此默認(rèn)情況下，上面的接口無(wú)法請(qǐng)求成功！

2. 通過(guò)代理解決接口的跨域問(wèn)題

通過(guò)vue-cli 創(chuàng)建的項(xiàng)目在遇到接口跨域問(wèn)題時(shí)，可以通過(guò)代理的方式來(lái)解決：

① 把 axios 的請(qǐng)求根路徑設(shè)置為vue 項(xiàng)目的運(yùn)行地址（接口請(qǐng)求不再跨域）

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

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

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

3. 在項(xiàng)目中配置 proxy 代理

步驟1，在main.js 入口文件中，把 axios 的請(qǐng)求根路徑改造為當(dāng)前web 項(xiàng)目的根路徑：

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

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

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

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

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

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

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

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

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

前綴的攜帶位置：緊跟端口號(hào)

如果直接這么請(qǐng)求的話 會(huì)導(dǎo)致404錯(cuò)誤 因?yàn)榘l(fā)送請(qǐng)求到5050服務(wù)器的時(shí)候攜帶的還是/api/students, 5050服務(wù)器有students但是沒(méi)有/api/students

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

ws作用：用于支持websocket

changeOrigin：（用于控制請(qǐng)求頭中host的值）

當(dāng)changeOrigin：true時(shí)，代理服務(wù)器會(huì)表明自己也是5050服務(wù)器

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

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

ws和changeOrigin這兩項(xiàng)如果不寫的話 默認(rèn)值也是true（在react中不寫為false）

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