vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說明

更新時間：2022年04月07日 10:09:17 作者：Sky_sjr

這篇文章主要介紹了vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Axios與proxy反向代理

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

1、Axios 的特性

從瀏覽器中創(chuàng)建 XMLHttpRequests
從 node.js 創(chuàng)建 http 請求
支持 Promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
取消請求
自動轉(zhuǎn)換 JSON 數(shù)據(jù)
客戶端支持防御 XSRF

2、Axios 的安裝

npm i axios
# 或者
yran add axios

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

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

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

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

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

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

最后那個地方需要就直接導(dǎo)入service 然后調(diào)用就行了

axios反向代理proxy個人理解

使用反向代理proxy的原因

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

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

proxy基本配置

module.exports = {
?? ?devServer: {
?? ??? ?proxy: {
?? ??? ??? ?'/proxyurl':{
?? ??? ??? ??? ?target:'http://localhost:9999',//起同源作用的url 簡單來說就是你要訪問的服務(wù)器
?? ??? ??? ??? ?//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中出現(xiàn)了’/proxyurl‘，反向代理起作用，將’/proxyurl‘前面這段’http://localhost:8080‘替換成了’http://localhost:9999‘，這時候請求資源的url變?yōu)?lsquo;http://localhost:9999/proxyurl/user/getalluser’。

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

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

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

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: