React中http-proxy-middleware代理使用
React项目npm run start启动本地服务后浏览器访问http://localhost:3000
start命令也可自定义port指定本地运行端口（eg: PORT=3002）
对于单点登录关联的站点，通过DNS服务器指向，绑定域名和IP，此时项目访问不能使用localhost或计算机IP地址，需要使用域名访问，通过一些软件配置host（eg: 127.0.0.1 app.web.com）此时本地环境就可以访问http://app.web.com:3002。
对于网关映射的服务地址，也需要配置对应的host完成本地环境的接口请求、数据交互。
现在流行微服务，在一个项目中会出现访问请求多个服务器，http-proxy-middleware这个插件就能帮助我们实现业务需求。
http-proxy-middleware插件用于设置代理，转发请求给其他服务器，解决前端的跨域请求
插件安装：npm install --save-dev http-proxy-middleware
使用：
src目录下新建setupProxy.js：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
// 将/userapi相关接口代理转发target对应的服务器上
// 相当于请求了http://appuser.web.com/userapi
app.use('/userapi', createProxyMiddleware({
target: 'http://appuser.web.com',
changeOrigin: true,// 默认为false,是否改变原始主机头为目标url
ws: true,// 是否代理websockets
pathRewrite: {// 重写path地址
'^/api/aaa': '/api/bbb'// 将请求的/api/aaa重写解析到/api/bbb
},
router: {// 用于重写目标服务器
// 当请求的host为172.14.14.102时重写目标服务器为后面的地址
'172.14.14.102': 'http://appuser.webapi.com'
}
}))
// 可以配置任意数量的转发，代理不同的接口和服务器
app.use('/adminapi', createProxyMiddleware({
target: 'http://appadmin.web.com',
changeOrigin: true,// 默认为false,是否改变原始主机头为目标url
ws: true,// 是否代理websockets
pathRewrite: {// 重写path地址
'^/api/ccc': '/api/ddd'// 将请求的/api/ccc重写解析到/api/ddd
},
router: {// 用于重写目标服务器
// 当请求的host为172.14.14.102时重写目标服务器为后面的地址
'172.14.14.102': 'http://appadmin.webapi.com'
}
}))
}
createProxyMiddleware这里是省略了第一个参数，表示匹配的路径，省略时表示匹配任何路径
createProxyMiddleware('/', {})、createProxyMiddleware({})、
createProxyMiddleware('**', {})都表示匹配任何路径，转发所有请求
也支持数组，函数等多种形式，数组表示匹配多个路径
createProxyMiddleware(['/api', '/data'], {})
还可以使用通配符来进行匹配
createProxyMiddleware('**/*.html', {})任何以.html结尾的请求
createProxyMiddleware('/userapi/*.html', {})userapi下所有以.html结尾的请求
createProxyMiddleware('!**/*.json', {})非!符号表示排除任何以.json结尾的请求
http-proxy-middleware原理是对nodejs的http-proxy库作了一层封装，支持http-proxy的option中的选项配置
