react解决跨域的方法

方法一：proxy (在package.json中配置跨域)

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。

{
    //配置proxy
  "proxy":"http://XXXX:XXX"
}

发送axios请求

axiox.get('http://localhost:3000?参数').then(res => {
  console.log(res);
})

 方法二：setupProxy

        一.在src文件夹下创建setupProxy.js文件

        二.配置代理

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware，react脚手架已经安装

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

 

优点：可以配置多个代理，可以灵活的控制请求是否走代理

缺点：配置繁琐，前端请求资源时必须加前缀