1. 說明
當(dāng)我們使用webpack-dev-server進(jìn)行本地開發(fā)的時(shí)候黔寇，如何能使用真實(shí)的接口來訪問數(shù)據(jù)呢？（前后端分離）
答案當(dāng)然是代理(proxy)
2. 使用案例
- 普通代理
proxy: {
'/api': 'http://172.16.24.105:8080'
}
說明：/api/user 現(xiàn)在會(huì)被代理到請(qǐng)求 http://172.16.24.105:8080/api/user
- 多組合并
proxy: [{
context: ['/auth', '/api'], // 組合匹配的路由數(shù)組
target: 'http://172.16.24.105:8080',
}]
說明：
/auth/user 現(xiàn)在會(huì)被代理到請(qǐng)求 http://172.16.24.105:8080/auth/user;
/api/goods 現(xiàn)在會(huì)被代理到請(qǐng)求 http://172.16.24.105:8080/api/goods;
- 路徑重寫
'/api': {
target: 'http://172.16.24.105:8080',
pathRewrite: {'^/api' : '/auth'} //路徑重寫
}
說明：/api/user 現(xiàn)在會(huì)被代理到請(qǐng)求 http://172.16.24.105:8080/auth/user
- 剔除部分
proxy: {
'/api': {
target: 'http://172.16.24.105:8080',
bypass: function(req, res, proxyOptions) { // 條件判定
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
說明：對(duì)于瀏覽器請(qǐng)求，你想要提供一個(gè) HTML 頁面缸沃，但是對(duì)于 API 請(qǐng)求則保持代理
- 跨域
proxy: {
'/api': {
target: 'http://172.16.24.105:8080',
changeOrigin: true, //本地虛擬一個(gè)服務(wù)器接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求（類似nginx）
}
}
