深析axios全域配置、攔截器和proxy跨域代理（圖文）

一、全域設定axios

1. 為什麼要全域設定 axios

在實際專案開發中，幾乎每個元件中都會用到axios 發起資料請求。此時會遇到以下兩個問題：

① 每個元件中都需要匯入 axios（程式碼臃腫）

② 每次發請求都需要填寫完整的請求路徑（不利於後期的維護）【相關建議：vue.js影片教學】

2. 如何全域設定 axios

在 main.js 入口檔案中，透過 app.config.globalProperties 全域掛載 axios，範例程式碼如下：

#3.在 vue2 的專案中全域設定 axios

需要在main.js 入口檔案中，透過Vue 建構函數的prototype 原型物件全域設定 axios

二、axios 攔截器

1. 什麼是攔截器

攔截器（英文：Interceptors）會在每次發起 ajax 請求和得到回應的時候自動被觸發。

2. 設定請求攔截器

透過 axios.interceptors.request.use(成功的回呼, 失敗的回呼) 可以設定請求攔截器。範例程式碼如下：

#2.1 請求攔截器 – Token 認證

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

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

############################################################################################################################################################################## ###############3. 設定回應攔截器######透過 axios.interceptors.response.use(成功的回呼, 失敗的回呼) 可以設定回應攔截器。範例程式碼如下：############################展示Loading效果實戰範例：############# ##############三、proxy 跨域代理######1. 介面的跨域問題######解決跨域 ######## #1）、Cors(最標準的處理) 不需要前段人員做任何處理 只需要寫伺服器的人在伺服器裡面在回傳回應的時候加幾個特殊的回應頭######2）、Jsonp 最巧妙的解決辦法  借助了script標籤裡面的src屬性 在引入外部資的時候不受同源策略限制這個特點辦到的    在開發中很少用 因為需要前端後端人員共同完成 而且只能解決get請求的跨域問題 ######3）、代理伺服器######代理伺服器也是個伺服器 它的連接埠號碼和我們自身保持一致 兩台伺服器之間的交流不首同源策略限制 即這樣可解決跨域問題 所以在發送請求的時候連接埠號碼也是8080#########vue 專案運行的位址：http://localhost:8080/#######API 介面運行的位址：http://www.escook.cn/api/users######由於目前的API 介面沒有開啟CORS 跨域資源共享，因此預設情況下，上面的介面無法請求成功！ #########################

2. 透過代理程式解決介面的跨域問題

透過vue-cli 所建立的專案在遇到介面跨域問題時，可以透過代理程式的方式來解決：

① 把axios 的請求根路徑設定為vue 專案的運作位址（介面請求不再跨域）

② vue專案發現請求的介面不存在，把請求轉交給proxy 代理

③ 代理程式把請求根路徑替換為devServer.proxy 屬性的值，發起真正的資料請求

④ 代理程式將請求到的數據，轉送axios

3. 在專案中設定 proxy 代理

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

#步驟2，在專案根目錄下建立vue.config.js 的設定文件，並宣告如下的配置：

#① devServer.proxy 提供的代理功能，僅在開發調試階段生效

② 項目上線發佈時，依舊需要API 接口伺服器開啟 CORS 跨域資源共享

使用方式一配置代理伺服器有兩個不完美的地方：

1、不能靈活的控制走不走代理伺服器

public資料夾相當於8080伺服器的根路徑（8080這台伺服器裡面有什麼就取決於public文件夾裡有什麼）當請求的資源8080自身有的時候  就不會將這個請求轉寄至5000伺服器

2、不能夠設定多個代理，只能將請求轉送給5000伺服器

使用方式二開啟代理伺服器  '/api' 請求前綴 

作用：當本地請求傳送至代理伺服器時 代理伺服器會來判 該請求的前綴是不是'/api'，如果是 則發送請求（轉發請求至5000），如果不是 則不發送請求 可以靈活的控制走不走代理伺服器（'/api'不是固定值，可自訂為'/hah' 等）

#前綴的攜帶位置：緊接在連接埠號

如果直接這麼請求的話 會導致404錯誤 因為發送請求到5050伺服器的時候攜帶的還是/api/ students, 5050伺服器有students但是沒有/api/students

加上這個設定才能保證代理伺服器發送到5050伺服器請求時 只發送了/students 從而拿到資料

ws作用：用於支援websocket

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

當changeOrigin：true時，代理伺服器會顯示自己也是5050伺服器

當changeOrigin：false時，代理伺服器表示自己是8080伺服器

#有時候5050伺服器會有些限制 所以這個配置項目最好設定為true。

ws和changeOrigin這兩個項目如果不寫的話 預設值也是true（在react中不寫為false）

以上是深析axios全域配置、攔截器和proxy跨域代理（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！