1. 一个完整的webpack配置代理代码
设置代理需要:
1、需要使用本地开发插件:webpack-dev-server。
2、webpack-dev-server 使用的是 http-proxy-middleware 来实现跨域代理的。
webpack配置信息:
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://blog.csdn.net/',
pathRewrite: {'^/api' : ''},
changeOrigin: true, // target是域名的话,需要这个参数,
secure: false, // 设置支持https协议的代理
},
'/api2': {
.....
}
}
}
};
2. 配置中主要的参数说明
2.1 ‘/api’
捕获API的标志,如果API中有这个字符串,那么就开始匹配代理,
比如API请求/api/user, 会被代理到请求 http://blog.csdn.net/api/user 。
2.2 target
代理的API地址,就是需要跨域的API地址。
地址可以是域名,如:http://blog.csdn.net
也可以是IP地址:http://127.0.0.1:8081
如果是域名需要额外添加一个参数changeOrigin: true,否则会代理失败。
2.3 pathRewrite
路径重写,也就是说会修改最终请求的API路径。
比如访问的API路径:/api/user,
设置pathRewrite: {‘^/api’ : ‘’},后,
最终代理访问的路径:http://blog.csdn.net/user,
这个参数的目的是给代理命名后,在访问时把命名删除掉。
2.4 changeOrigin
这个参数可以让target参数是域名。
2.5 secure
secure: false,不检查安全问题。
设置后,可以接受运行在 HTTPS 上,可以使用无效证书的后端服务器
3. 参考资料
webpack-dev-server: https://github.com/webpack/webpack-dev-server.
http-proxy-middleware: https://github.com/chimurai/http-proxy-middleware