React使用http-proxy-middleware解决跨域
代理的含义顾名思义就是在客户端和服务器中间找一个“中介”,“中介”驻扎在客户端的端口,每次客户端要发送请求,都直接找到本地的“中介”让他帮忙完成这个事。
如果只会找一个服务器,那就只需要在package.json中进行配置
在项目的package.json中添加如下配置:
“proxy”:"http://localhost:3000[这个是服务器地址]"
如果有个服务器需要进行代理,那么就需要使用http-proxy-middleware
首先安装依赖
yarn add http-proxy-middleware
然后在index.js的统计目录下建立文件setupProxy.js(名字必须是这个)
内容如下:
const {createProxyMiddleware} = require('http-proxy-middleware') module.exports = function(app){ app.use('/api1',createProxyMiddleware({ target:'http://localhost:3000', changeOrigin:true, pathRewrite:{ '^/api1':'' } })) app.use('/api2',createProxyMiddleware({ target:'http://localhost:8080', changeOrigin:true, pathRewrite:{ '^/api2':'' } })) }