React-配置代理跨域

两种：

第一种：这种方案只能配置一个服务器的代理跨域

在package.json文件下添加：proxy：’xxxxx’ //服务器的地址

这里的调用api的地址使用你服务端的地址即可。

第二种：可以对多套服务器环境进行代理配置

借助第三方库:http-proxy-middleware

项目安装：npm install –save-dev http-proxy-middleware

在src目录下新建setupProxy.js文件,在js文件里写入配置:

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

module.exports = function (app) {

app.use(

‘/api’, // 指定需要转发的请求

createProxyMiddleware({

target: ‘http://localhost:3001′,//服务器的地址

changeOrigin: true,

pathRewrite(path) {

return path.replace(‘/api’, ”);

}

})

);

}

在你业务接口的调用路径前面加上/api：

最后最重要的一点：api调用的服务器的地址(baseUrl)应是你当前的本地地址，比如我的本地地址是：http://localhost:3000，，我的服务器地址：http://localhost:3001，如果还是以服务器的地址作为baseUrl，那还是跨域失败，当然如果你上线时，自己要做好逻辑判断，用回服务器地址。

以上两个方案在设置后都需要进行服务重启才会生效。