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':''
        }
    }))
        
}

 

posted @ 2021-12-27 14:11  Running°つ  阅读(327)  评论(1编辑  收藏  举报