React中配置反向代理

1.下载相关依赖

cnpm i http-proxy-middleware --save -dev

2、在src目录下新建 setupProxy.js 的文件

3、然后在setupProxy.js写如下代码（2020-6-23日下载的版本）

const { createProxyMiddleware } = require('http-proxy-middleware')
 
module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://10.16.21.29:8080/A/ar/api',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }))
}

4、报错解决（1）
网上很多老版本的写法如下：

此时cmd中会报proxy is not a funtion 表示此方法已经被弃用
旧版可在setupProxy.js中设置proxy属性

const { createProxyMiddleware } = require('http-proxy-middleware')
 
module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://www.ibugthree.com',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }))
}

5、报错解决（2）
之前用中间件做代理的时候使用上面链接的教程是正确的，现在会报错

 将
const { createProxyMiddleware } = require('http-proxy-middleware');
改为
const  createProxyMiddleware  = require('http-proxy-middleware');

5、重启项目

npm start