React接口跨域配置代理方法及遇到问题解决

浏览器3000端口调用5000端口服务器出现跨域

方法一：设置package.json ----设置proxy为服务器地址，只能设置一个

遇到问题：

1、修改package.json文件后需重新启动项目

2、项目启动后3000端口被占用，浏览器起3001端口，app.js却用localhost:3000调用则失败

pagkage.json配置文件

App.js文件

启动后浏览器调用数据成功

方法二、配置setupProxy.js文件---src文件夹下新创建setupProxy.js文件

遇到问题：1.http-proxy-middleware引入方式不同，我这个是高版本引入方式如下图配置文件，低版本引入方式为 

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

如引入方式错误，则启动项目浏览器打开页面为无法访问

http-proxy-middleware引入方式错误是浏览器页面

2.配置多个地址时，我从/api开始写 第一个地址配置为/api，第二个地址配置为/api1则只有第一个配置的/api能正确访问，第二个配置地址无法访问(不知道啥原因----貌似因为/api1包含/api所以碰到/api就被第一个配置解析了，地址匹配错误所以访问不到)

setupProxy.js文件

App.js文件

配置完成后访问5000和5001端口返回数据