1. 说明
当我们使用webpack-dev-server进行本地开发的时候，如何能使用真实的接口来访问数据呢？（前后端分离）
答案当然是代理(proxy)
2. 使用案例
- 普通代理
proxy: {
'/api': 'http://172.16.24.105:8080'
}
说明：/api/user 现在会被代理到请求 http://172.16.24.105:8080/api/user
- 多组合并
proxy: [{
context: ['/auth', '/api'], // 组合匹配的路由数组
target: 'http://172.16.24.105:8080',
}]
说明：
/auth/user 现在会被代理到请求 http://172.16.24.105:8080/auth/user;
/api/goods 现在会被代理到请求 http://172.16.24.105:8080/api/goods;
- 路径重写
'/api': {
target: 'http://172.16.24.105:8080',
pathRewrite: {'^/api' : '/auth'} //路径重写
}
说明：/api/user 现在会被代理到请求 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';
}
}
}
}
说明：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理
- 跨域
proxy: {
'/api': {
target: 'http://172.16.24.105:8080',
changeOrigin: true, //本地虚拟一个服务器接收你的请求并代你发送该请求（类似nginx）
}
}
