新H5应用项目欲实现前后端完全分离,脱离原来的后端框架,独立工程进行开发。Auth相关可以通过cookie共享解决,但接口访问就会涉及跨域,在尝试cors方案各种坑后,决定使用反向代理。至于代理方案,生产环境使用 nginx 可以轻松实现,但在开发阶段使用的是 webpack-dev-server,也需要支持代理访问接口。webpack官网文档并没有给出关于代理的详细配置,但其代理使用的是http-proxy-middleware
,内部调用的是 http-proxy
包予以实现代理。在 http-proxy-middleware 文档中有关于 proxyTable 的详细配置。对于一般场景来说,主要是以下两个配置:
changeOrigin
设置为true
可修改转发header中host值为 target 的URL,对于使用多虚拟主机配置的服务器可以访问对应 host,也就是目标代理服务器,如果你的目标服务器不存在多虚拟机的情况,并且后端应用逻辑无需校验指定请求的URL,也可以忽略不设置pathRewrite
重写请求url,保持与目标代理服务器的请求地址一致1
2
3
4
5
6
7'/api/*': {
target: 'http://target.com/',
changeOrigin: true,
pathRewrite: {
'^/api' : ''
}
}
经过rewrite后 /api/users/info
->/users/info
,如果不rewrite,目标地址会加上 /api 前缀,不符合目标服务器的url请求规