axios的二次封裝與proxy反向代理怎么使用

本文小編為大家詳細介紹“axios的二次封裝與proxy反向代理怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“axios的二次封裝與proxy反向代理怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

Axios與proxy反向代理

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

1、Axios 的特性

• 從瀏覽器中創建 XMLHttpRequests

• 從 node.js 創建 http 請求

• 支持 Promise API

• 攔截請求和響應

• 轉換請求數據和響應數據

• 取消請求

• 自動轉換 JSON 數據

• 客戶端支持防御 XSRF

2、Axios 的安裝

npm i axios
# 或者
yran add axios

3、Axios 與proxy反向代理的使用

在要進行使用的文件(request.js)里面導入

// 這是實現 axios 的二次分裝
// 導入下載好的包
impront axios from 'axios'
// 創建 axios 實例
const service = axios.create({
    // 添加要對接的后端 url 接口
    // bassUrl: '<url>',
    // 設置超時時間
    timeout: 3000
})
// 請求攔截
service.interceptors.request.use(config => {
    // 可以添加一些響應頭信息等
    
    return config
}) 
// 響應攔截
service.interceptors.response.use(res => {
    console.log('請求攔截', res)
    return res
})
// 導出
export default service

如果是對接多個后端接口，前端應用和后端API服務器沒有運行在同一個主機上，你需要在開發環境下將API請求代理到 API服務器，就在vue.config.js 中書寫如下代碼

// vue.config.js
module.exports = {
  devServer:{
      // 更改端口號
      port: 9550,
      // 是否自動打開瀏覽器
      open: true，
      proxy: {
       // 這里是訪問到以 /api 開頭的 url 的時候會代理到target 目標上
          '/api': {
              target:'<url>',
              ws: true,
              changeOrigin:true，
              // 重新修改路徑
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

注：為什么要重新修改路徑，因為在發送請求后會在url中多拼接上一個 ’‘ /api ’‘ ，但是我們獲取數據又不需要這個才能拿到，所以就要重新修改，把他拿掉；拿掉之后就可以獲取到數據了

最后那個地方需要就直接導入service 然后調用就行了

axios反向代理proxy個人理解

使用反向代理proxy的原因

首先需要了解瀏覽器的同源策略，同源就是說比如你VUE的項目地址是“http://localhost:8080”,而你后端項目啟動地址是‘http://localhost:9999’，兩者中協議（http）、域名（localhost）相同，但是端口號（：xxxx）vue是8080，而后端是9999不相同，所以產生跨域，需要使用反向代理。（若兩者滿足協議、域名、端口號相同則不存在跨域問題）。

反向代理在我個人理解就是給你vue項目訪問后端資源時給你套上的一個殼，讓瀏覽器認為本次請求是同源的，瀏覽器就不會進行攔截，數據可以正常返回（類似vpn原理吧）。

proxy基本配置

module.exports = {
    devServer: {
        proxy: {
            '/proxyurl':{
                target:'http://localhost:9999',//起同源作用的url 簡單來說就是你要訪問的服務器
                //ws: true, 這個是 開啟websocket
                changeOrigin: true,//字面意思：更改源點 很多人說是開啟跨域 也可以這么理解
                pathRewrite: {
                    '^/proxyurl': '' //還有一種寫法是'^/proxyurl': '/' 自測
                }
            }
        }
    }
}

//寫個最簡單的例子用法
//前端項目地址是 http://localhost:8080
//后端項目地址是 http://localhost:9999
    axios.get("/proxyurl/user/getalluser").then(res => {
        console.log(res);
    });

解釋這個例子：

顯然我們是通過vue項目訪問了后端資源，拋開代理單看這段代碼，是以http://localhost:8080/proxyurl/user/getalluser請求資源的。

但是有了反向代理，反向代理看到了你這段url中出現了’/proxyurl‘，反向代理起作用，將’/proxyurl‘前面這段’http://localhost:8080‘替換成了’http://localhost:9999‘，這時候請求資源的url變為‘http://localhost:9999/proxyurl/user/getalluser’。

但是我們又配置了一項pathRewrite: {'^/proxyurl': ''}，'^/proxyurl'是正則表達式，它會匹配你url中的字符串。這一選項的代碼意思是，將url中的’/proxyurl‘替換為空字符串。則現在的url是http://localhost:9999/user/getalluser

ps：通常我們會將axios封裝，可以在創建axios實例時這樣寫

export function request(config){
    let axiosInstance = axios.create({
        baseURL: '/proxyurl', //在調用時拼接上后面的url就可以了
        timeout: 5000
    });
    return axiosInstance(config);
}

讀到這里，這篇“axios的二次封裝與proxy反向代理怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。