在開始講解前醋旦，先了解一下為什么會失效恒水；在項(xiàng)目中，會遇到一個問題饲齐， 就是使用webpack的時候,使用代理钉凌，可在開發(fā)環(huán)境中使用；但是在編譯打包過后捂人，前端頁面就變成了單獨(dú)的靜態(tài)資源御雕，而webpack的devServer被抽離了出去，這是和我們的代理實(shí)際上是沒有應(yīng)用的
簡單說就是 webpack.proxy 不會一起打包到build文件或者dist文件先慷。
我們先來看看如何使用webpack的代理：↓
這里的例子是使用CRA crate react app 的例子饮笛，（這個其實(shí)無論在vue或者其他的庫或者框架都一樣，只要是webpack）
const CracoLessPlugin = require('craco-less');
const path = require('path')
module.exports = {
port: 9527,
devServer: {
'proxy': {
'/307984': {
target: 'http://rap2api.taobao.org/app/mock', // 代理地址的路徑
changeOrigin: true, // 替換
},
'/': {
target: 'http://47.108.***.***:22002',// 代理地址的路徑
changeOrigin: true, // 替換
pathRewrite: { // 重定向论熙，路徑重寫
'^/': '', // ^首匹配 重寫過后 http://47.108.***.***:22002（重寫內(nèi)容）/*****
},
},
},
},
};
在這里代理了兩個地址福青， 一個是mock的地址，一個是測試服的地址脓诡，這是一個簡單的例子无午，但是這種會面臨一個問題，生產(chǎn)環(huán)境這不會生效祝谚，需要后端配合處理宪迟。但是其實(shí)也可以處理
解決辦法：
這里用的是axios, 既然不達(dá)不到我們想要的效果那就自己寫一個代理,配合
.env來使用
import axios from 'axios';
import {message as Massage} from 'antd'
import { store } from '../store'
const service = axios.create({
// baseURL: process.env.REACT_APP_BASE_URL,
timeout: 30000,
})
// 代理配置 鍵做匹配項(xiàng)，用.env 來區(qū)分開發(fā)還是生產(chǎn)環(huán)境
let proxyConfig = {
'/307984': {
target: process.env.REACT_APP_ENV === 'production' ? 'http://rap2api.taobao.org/app/mock' : 'http://rap2api.taobao.org/app/mock',
},
'/': {
target: process.env.REACT_APP_ENV === 'production' ? 'https://****admin.***ap.com/api' : 'http://47.108.***.173:22002',
},
}
//定義代理
function beforeService(obj) {
let handel = {
get: (IsTarget, property, receiver) => {
// IsTarget 目標(biāo)對象交惯， property 屬性次泽， receiver 代理對象， 這里是對url做出針對處理
if (property === 'url') {
for (const key in proxyConfig) {
if ((IsTarget.url).slice(0, key.length) === key) {
return proxyConfig[key].target + IsTarget.url
}
}
} else {
return IsTarget[property]
}
},
}
// new Proxy(target目標(biāo)對象席爽， handel處理對象)
let proxy = new Proxy(obj, handel)
return service(proxy)
}
// 請求攔截
service.interceptors.request.use(function(config) {
const token = store.getState().user.tokenHead + store.getState().user.token
config.headers['Authorization'] = token
return config
})
// 響應(yīng)攔截
service.interceptors.response.use(function(response) {
if (response.status >= 200 && response.status <= 300) {
let { message, data, code} = response.data
if (code === 200) { // 成功data數(shù)據(jù)
return response.data
}
if (message) {
Massage.info(message)
}
}
// 錯誤提示
const error = new Error('異常:' + message)
Massage.error(message);
return Promise.reject(error)
}, function(error) {
return Promise.reject(error);
})
export default beforeService // 開啟代理
// export default service // 常規(guī)axios
在這個例子中定義了一個 beforeService的函數(shù)意荤，這里用到了我們的代理，具體可以看代碼只锻，有注釋玖像；思路是，我們在請求之前齐饮，傳入url的時候捐寥，這個時候來根據(jù)路徑做出匹配處理，最后再返回回去
