# 前言
首先强调的是webpack proxy只能用作于开发阶段,临时解决本地请求服务器(通常是测试服)产生的跨域问题,并不适用线上环境。配置在webpack的 devServer
属性中。
有人可能会误会线上环境就是正式服,我们团队曾就有人利用
process.env.NODE_ENV
来区分测试服和生产服。 其实不然。
对于node_env
来说,默认只有两种状态即development
和production
,前者指代本地开发即localhost环境,而后者代表发布在任何服务上的服务,node
是不知道你服务是测试还是正式,除非你手动指定。通常认为都是线上环境。
# 设置 proxy 目的
为解决在本地开发时XHR异步请求跨域问题(如果你的后端小伙伴愿意给你处理,无需配置)
# 原理
webpack中的proxy
只是一层代理,用于把指定的path
,代理去后端提供的地址,背后使用node来做server。可能有人疑惑,为什么只适用本地开发?因为该技术只是在webpack打包阶段在本地临时生成了node server,来实现类似nginx 的proxy_pass
的反向代理效果
proxy
工作原理实质上是利用http-proxy-middleware
这个http代理中间件,实现请求转发给其他服务器。例如:本地主机A为http://localhost:3000
,该主机浏览器发送一个请求,接口为/api
,这个请求的数据(响应)在另外一台服务器Bhttp://10.231.133.22:80
上,这时,就可以通过A主机设置webpack proxy,直接将请求发送给B主机。
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);
// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
必须配置changeOrigin= true
# 核心概念
var proxy = require('http-proxy-middleware');
var apiProxy = proxy('/api', {target: 'http://www.example.org'});
// \____/ \_____________________________/
// | |
// context options
- content:用于定义哪些请求需要被目标主机代理
- option.target:目标主机(协议+主机名)
也可以简写 var apiProxy = proxy('http://www.example.org/api');
option的几种配置
option.pathRewrite
: 重写目标的url路径,key
用正则表达式来匹配路径
// 重写路径
pathRewrite: {'^/old/api' : '/new/api'}
// 移除路径
pathRewrite: {'^/remove/api' : ''}
// 添加基础路径
pathRewrite: {'^/' : '/basepath/'}
// 路径自定义
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }