Vue和React中的反向代理

Vue和React中的反向代理

反向代理原理

要说到反向代理，我们就得先提一下，为什么需要用到反向代理？

因为在我们通过 ajax 请求数据的时候存在同源策略问题，因为协议、域名、端口中有不同，就会导致产生跨域问题，而反向代理是我们开发中用的很多的一种解决跨域问题的方式。

跨域是浏览器的行为 当我们在浏览器端跨域请求数据的时候，其实浏览器已经把数据给我们返回了，但是浏览器自身检测到这是跨域的，因此把这部分数据拦截了，这就是所谓的跨域问题。

接下来就进入正题，先来说一下反向代理的原理，看下图

正因为浏览器会对跨域的请求进行拦截，因此第一幅图就容易理解了吧。

实际的原理是通过 服务器去请求数据，因为服务器之间是不存在跨域问题的，就如图二所示，页面是存在 8080 这台 page服务器上的 ，当我们请求数据的时候，让 8080 服务器帮我们做代理（即代理到目标服务器3000），让他去帮我们请求数据，这样就让 浏览器和请求地址就同源了，不会有跨域问题。

Vue反向代理