反向代理和正向代理

这个知识点属于服务器端的范围，但是作为前端的我们，还是需要了解一下，开拓一下自己的眼界。

1. 由于浏览器的同源策略，我们不能通过ajax跨域请求接口数据，但是接口又不支持cors
2. 需要一个天梯翻墙
3. 客户端通过代理来控制访问授权

正向代理

正向代理原理为下面几个步骤

1. 客户端（用户A）向代理服务器Z发送一个请求同时指定一个目标（服务器B）
2. 代理服务器Z根据指定的目标，向目标服务器（服务器B）转发用户A的请求
3. 目标服务器（服务器B）接受到代理服务器转发的请求后，将对应的资源返回给代理服务器Z
4. 代理服务器Z接收到目标服务器（服务器B）的资源后，返回给客户端（用户A）

[图片上传失败...(image-4306a0-1513684744080)]

正向代理的用途

1. 访问本无法访问的资源服务器B
   [图片上传失败...(image-68b577-1513684744081)]

   典型的例子： 就是我们在国内的浏览器不能访问国外的资源，通过开启一个vpn就可以访问到国外的资源，以前都是通过正向代理，我在浏览器输入一个有目标的地址，指定我要访问的内容，然后通过代理服务器来转发返回资源。

2. 客户端授权

   有一些大公司只能在局域网内部访问资源，这也是通过正向代理来控制，通过是路由器发生故障，通过代理服务器Z来给对应的用户授权，只有授权过后的用户才可以访问到对应的网络资源(服务器B)

[图片上传失败...(image-d64a41-1513684744081)]

3. 利用cache的缓存

   现在一般都是通过cdn反向代理来实现缓存，正向代理也可以实现缓存，如果用户A来访问服务器B之前，用户B已经通过代理服务器Z访问了服务器B，这个时候代理服务器Z可以把源服务器的资源储存起来，然后用户A访问的时候，直接返回缓存的资源，就不用千里迢迢去找服务器B了。

反向代理

反向代理的原理：

1. 客户端（用户A）向代理服务器Z发送一个请求
2. 代理服务器Z自己决定向源服务器发送请求
3. 源服务器返回给代理服务器资源
4. 代理服务器将资源再转发给客户端

区别： 可以看出正向代理和反向代理的区别就是，反向代理中，客户端什么都不用做，只需要请求代理服务器的命名空间中的接口名，然后代理服务器自己去请求然后返回资源。 反向代理并不需要知道源服务器的地址和端口。

反向代理的用途：

1. 利用反向代理实现跨域

   我们经常在项目中通过node层开启一个服务器来转发请求，由于服务器之间不会受到浏览器的同源策略的影响，这样就可以轻松的获取资源了。下面是我最近例子中的一个反向代理(简化了)。

   // 服务器端的代码
   app.get('/api/getCdInfo', function (req, res) {
     const url = '源服务器地址'
     axios.get(url, {
       headers: {
         referer: 'https://c.y.qq.com/',
         host: 'c.y.qq.com'
       },
       params: req.query
     }).then((response) => {
       res.json(ret)
     })
   })
   
   
   // 前端代码
   axios.get('/api/getCdInfo', {
       params: data
   })...
   

   这样我们就可以伪造请求并跨域请求

2. 利用cache实现cdn（内容分布网络）

   cdn就是通过开启一个代理服务器来存放一下资源，实现就近分配资源和静态资源缓存加载。但是cdn的实现原理也是一来了反向代理

[图片上传失败...(image-8db582-1513684744081)]

1. 用户在浏览器中输入需要访问的资源地址
2. 浏览器根据对于的域名向域名解释器地址发送解析请求
3. cdn域名解释器接受到了请求后，返回已经制定好了的域名地址
4. 浏览器得到新的域名地址，再次向域名解析器发送请求，解析对应的域名，并返回对应的ip
5. 浏览器就向对应的ip（代理服务器主机）发送请求
6. 代理服务器然后再向源服务器发送请求，并把资源返回给客户端
7. 通过代理服务器对资源的cache控制，来确定之后的客户端请求是否还需要继续请求源服务器

cdn.jpg

---

参考链接

图解cdn

图解正向代理、反向代理、透明代理

​