npm i axios
# 或者
yran add axios

// 這是實(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

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

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

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

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