react解决跨域 报错onAfterSetupMiddleware‘ option is deprecated. Please use the ‘setupMiddleware

如果就一个服务器时。我们可以直接在package.json直接配置代理：

{
  "name": "react_staging",
  // 其他配置项......
	"proxy": "http://localhost:5000"  
}

如果需配置两个及以上时。就需要在 src文件下新建setupProxy.js

在react@17.x版本时的配置：

//TODO  注意这里是默认暴露
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
  app.use(
  //跨域1
    proxy('/api1', { // 当发起以 /api1 为前缀的请求时，触发该代理
      target: 'http://localhost:5000', //要转发的地址
      //为true时，Host为 服务端ip和端口，false为请求方ip和端口
      changeOrigin: true, //服务器接收的 Host 字段的值。(是否欺骗服务器请求来源。默认false)
      // 将 /api1 前缀置为空
      pathRewrite: {'^/api1': ''}
    }),
    //跨域2。。。
        )
}

最近在使用时发现报错。查看react为18版本

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        //跨域1
        createProxyMiddleware('/api1', { // 当发起以 /api1 为前缀的请求时，触发该代理
            target: 'http://localhost:5000', /* 要转发的地址 */
            //为true时，Host为 服务端ip和端口，false为请求方ip和端口
            //服务器接收的 Host 字段的值。(是否欺骗服务器请求来源。默认false)
            changeOrigin: true, 
            // 将 /api1 前缀置为空
            pathRewrite: {'^/api1': ''}
        }),
        //跨域2
       )
}