基于React框架的axios跨域问题解决方案：配置代理

1.服务端只有一个端口且与客户端域不同时

客户端(client) 端口是http://localhost:3000/，如果服务端(server)就一个端口时，例如：http://localhost:5000/，只需要在package.json文件中添加配置 "proxy":'http://localhost:5000'  就行了

2.服务端有多个端口时且与客户端域不同时

客户端(client) 端口是http://localhost:3000/，服务端1(server1)端口：http://localhost:5000/，服务端2(server2)端口：http://localhost:5001/ 。需要在src文件夹中创建setupProxy.js文件，同时在文件夹中配置如下：

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

module.export =function(app){
  app.use(
    proxy('/api1',{//遇见/api1前缀的请求，就会触发该代理配置
      target:"http://localhost:5000",//请求转发给谁
      changeOrign:true,//控制服务器收到的请求头中Host的值
      pathRewrite:{'^/api1':''}//重写请求路径
    }),
    proxy('/api2',{//遇见/api1前缀的请求，就会触发该代理配置
      target:"http://localhost:5001",//请求转发给谁
      changeOrign:true,//控制服务器收到的请求头中Host的值
      pathRewrite:{'^/api2':''}//重写请求路径
    }),

  )
}

 

 Client 使用axios向http://localhost:5000/ 发送请求时需要在axios.get函数中传入url参数http://localhost:3000（客户端地址）后面拼接配置项中所对应的参数在这里是/api1 ，同理，如果向服务器端口httpp://localhost:5001发送请求时需要在axios.get函数中传入url参数http://localhost:3000（客户端地址）后面拼接配置项中所对应的参数在这里是/api2。如下图所示：