为什么要用代理

我们在实际的开发过程中，会存在跨域的问题（请求的资源协议（例：http，https），域名, 端口这三个有一个不一致就会产生跨域），通过代理的方式可以解决跨域问题。

代理是怎么解决跨域的

如下图所示，当前我们要在Client 3000 端口请求Client 5000的数据，如果我们不用代理，client 3000直接给5000发送请求的时候，会产生跨域。注意，此时我们的3000端口是能够给5000端口发请求的，而且5000端口也能把响应的数据返回来，但是client 3000的ajax引擎发现返回来的数据不是从3000回来的，就拦截了返回的数据，这就是跨域导致的数据获取不到的原因。

代理原理2.jpg

而这个时候，代理登场，作为中间人，代理也开在client3000上，Client3000上的浏览器通过向同在Client3000上的代理发送请求，代理再将请求转发给Client5000，5000接收到请求，将结果返回给Client3000上的代理，代理拿到返回结果，再返回给Client3000上的浏览器，因为代理也在Client3000上，所以不会被ajax引擎拦截，这样就成功的从Client5000拿到了返回结果。可能大家会有疑问，为什么Client5000返回给代理的数据，不会跨域呢？因为跨域的本质是ajax引擎的拦截，而代理上面没有ajax引擎，所以返回结果也就不会被拦截。

代理原理.jpg

React中怎么实现代理

实现代理的方式有很多，本篇介绍一下两种React中的代理实现形式。

1、package.json中配置

"proxy": "http://localhost:5000"

这里的http://locahost:5000 就是你要请求的资源的url。这种形式虽然简单，但是缺点是只能配置一个代理，当我们的系统需要配置多个跨域代理的时候，这种方式就不适用。

2、新建setupProxy.js文件配置

如果需要配置多个代理地址，我们通过新建文件setupProxy.js的方式，在文件中进行如下配置：

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

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

axios请求代码如下

 axios.get("http://localhost:3000/api1/students").then((response)=>{
            console.log(response)
        })

React中的代理（一）