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

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

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

Axios與proxy反向代理

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

1、Axios 的特性

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

2、Axios 的安裝

npm i axios
# 或者
yran add axios

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

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

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

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

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

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

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

axios反向代理proxy個(gè)人理解

使用反向代理proxy的原因

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

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

proxy基本配置

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

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

解釋這個(gè)例子：

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

但是有了反向代理，反向代理看到了你這段url中出現(xiàn)了’/proxyurl‘，反向代理起作用，將’/proxyurl‘前面這段’http://localhost:8080‘替換成了’http://localhost:9999‘，這時(shí)候請(qǐng)求資源的url變?yōu)?lsquo;http://localhost:9999/proxyurl/user/getalluser’。

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

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

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

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

您可能感興趣的文章: