React配置反向代理(报错:Access to XMLHttpRequest at 或 proxy is not a function）

重要的事情说3遍：
按照我这个能解决跨域！
按照我这个能解决跨域！
按照我这个能解决跨域！

近期在学习react，然后自己做一个小项目，但是遇到了一个跨域问题。解决这东西我有做过，但是在react中还是第一次做，在此做一下记录。

按照网上一大堆的篇章里操作了一下，会报一个proxy is not a function！

你们真的是在给我挖坑呀

解决办法

1. 首先在src下面创建setupProxy.js文件，里面的内容

//const proxy = require("http-proxy-middleware");这个不对，坑！！！！！
const { createProxyMiddleware } = require('http-proxy-middleware');//现在要改成这样

module.exports = function(app) {
  // /api 表示代理路径
  // target 表示目标服务器的地址
  app.use(
  	//这里也要改成这样
    createProxyMiddleware('/api', {
      target: 'http://120.55.193.14:5000',
      // 跨域时一般都设置该值 为 true
      changeOrigin: true,
      // 重写接口路由
      pathRewrite: {
        '^/api': '' // 这样处理后，最终得到的接口路径为： http://localhost:8080/xxx
      }
    })
  )
}

2. 其实第一步已经把配置代理做好了，现在我补充一下接口的改变

   const service = axios.create({
        // 设置baseUr地址,如果通过proxy跨域可直接填写base地址
        baseURL: '/api',
    });
	请求使用：let res = await this.$http.get('/zhsq/navigation.do')就是把前面的域名去掉


====或者在使用的接口前面加上/api（恐怕没人这么傻吧）
	请求使用：let res = await this.$http.get('/api/zhsq/navigation.do')

然后重启就ok了

你们看完记得点赞，拒绝白嫖！拒绝白嫖！拒绝白嫖！