通过proxy实现react配置代理

1、首先，下载包http-proxy-middleware;

             

npm i http-proxy-middleware

2、然后，在src目录下创建setupProxy.js文件，react内部会直接读取，无需引入。

3、在setupProxy.js中引入http-proxy-middleware，进行配置

   (1)、若下载的react版本是18及以上，用以下方式：

const Proxy = require('http-proxy-middleware');


module.exports = function(app) {
    app.use(
        Proxy.createProxyMiddleware('/api',{ // 发起请求携带/api，走以下
            target:'http://localhost:8000', // 请求转发给的端口
            changeOrigin:true, // 我理解的是改变同源
            pathRewrite:{'/api':''}  // 把携带的/api清掉，到服务器是没有/api的
        })
    )
}

(2)、若下载的版本18以下：

const Proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        Proxy('/api',{
            target:'http://localhost:8000',
            changeOrigin:true,
            pathRewrite:{'/api':''}
        })
    )
}

欢迎各位提出问题并指导！！！