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中的选项配置