【51CTO活动】8.26 带你深度了解清华大学、搜狗基于算法的IT运维实际与探求
背景
跨域是由阅读器的同源策略惹起的，是指页面央求的url地址，必须与阅读器上的url地址处于同域上(即域名，端口，协议相反)。
这是为了避免某域名下的接口被其他域名下的网页合法调用，是阅读器对JavaScript施加的安全限制。
这个措施的动身点是好的，但是顺序页面开发的进程中，却常常给前端开发者带来费事。
由于前端开发进程中，静态资源是放在本地电脑上的，拜访这些资源通常经过IP方式(127.0.0.1)或许localhosts来拜访，与线上效劳器所在域名不符，不能顺利调用效劳的端口。
处置跨域成绩常用的处置方案有这两个：
JSONP：应用script标签可跨域的特点，在跨域脚本中可以直接回调以后脚本的函数。
CORS：效劳器设置HTTP照应头中Access-Control-Allow-Origin的值，解除跨域限制。
但是这两个跨域方案都存在一个致命的缺陷，严重依赖后端的协助。
开发中遇到的每一个接口都需求提早找后端停止特殊的处置。而且即使后端情愿帮忙，某些接口不是随意就能开放的(譬如曾经在上线正式环境的接口)。
无论如何，依赖后端协助的跨域处置方案都会在一定水平下限制前端开发的进度。
那么有没有前端独立就能完成的跨域方案呢?有的，我们可以应用「代理」或「反向代理」技术来完成开发中的跨域成绩。
代理与反向代理
代理
代理，也称正向代理，意思是一个位于客户端和目的效劳器(target server)之间的效劳器，为了从目的效劳器取得内容，客户端向代理发送一个央求并指定目的(目的效劳器)，然后代理向目的效劳器转交央求并将取得的内容前往给客户端。
深刻地说：
「客户端」可以看作一个黑社会大佬，「目的效劳器」可以看作一家饭店，「代理效劳器」可以看作小弟。
「老大」想吃饭店的酱排骨饭，就让「小弟」去买，「小弟」跑到「饭店」要个酱排骨饭。
「饭店」酱排骨饭做好，送到「小弟」手上，「小弟」最后再把酱排骨饭拿给「大佬」。
说白了，小弟就是个跑腿的，代理大佬的需求。
数据流程：
数据央求进程：阅读器-》代理效劳器-》目的效劳器
数据前往进程：目的效劳器-》代理效劳器-》阅读器
运用:
最经典的运用就是迷信上网：我是一个国际用户，我拜访不了谷歌，但是我能拜访一个香港的某个代理效劳器。
这个香港的代理效劳器可以拜访谷歌，于是我先把央求发送到那个代理效劳器，通知他我需求拜访谷歌，代理效劳器去取内容，最后前往给我。
就好比，大佬被抓起来坐牢了，不能出去买酱排骨，只好拜托小弟去买回来。
反向代理
百度百科的解释如下：
反向代理(Reverse Proxy)方式是指以代理效劳器来接受internet上的衔接央求，然后将央求转发给外部网络上的效劳器，并将从效劳器上失掉的结果前往给internet上央求衔接的客户端，此时代理效劳器对外就表现为一个反向代理效劳器。
数据流程：
数据央求进程：阅读器-》【反向代理效劳器-》处置数据的效劳器】
数据前往进程：【处置数据的效劳器-》反向代理效劳器】-》阅读器
深刻地说：
「阅读器」可以看作食客，「【反向代理效劳器-》处置数据的效劳器】」这一个全体可以看作饭店，其中「反向代理效劳」相当于点单的效劳员。「处置数据的效劳器」可以了解为是厨师。
「食客」向离开「饭店」向「效劳员」点菜，但效劳员并不会真正去做菜，他是下达命令让「厨师」去做菜。
「厨师」把菜做好了给「效劳员」，「效劳员」再把菜端给「食客」。
在外部看来，「代理效劳器」和「处置数据的效劳器」是一个全体。就好比，食客只会去饭店吃饭，而不是去找厨师吃饭(即关于阅读器来说，抵达反向代理效劳器曾经完成义务了，前面的操作则由反向代理效劳器担任)。
详细饭店怎样操作，对食客是透明的。有能够某个效劳员即当效劳器也当厨师(即反向代理效劳器和处置数据的效劳器是同一台PC机)。
补充一下，没有反向代理，就好比没有了效劳员，食客直接向厨师要吃的。譬如，你饿了，直接叫妈妈做饭是一样的(少了下订单的步骤)
比较
从用途下去讲：
正向代理的典型用途是为在防火墙内的局域网客户端提供拜访Internet的途径。正向代理还可以运用缓冲特性增加网络运用率。
反向代理的典型用途是为后端的多台效劳器提供负载平衡，或为后端较慢的效劳器提供缓冲效劳。
从安全性来讲：
正向代理允许客户端经过它拜访恣意网站并且隐藏客户端本身，因此你必须采取安全措施以确保仅为经过授权的客户端提供效劳。
反向代理对外都是透明的，拜访者并不知道本人拜访的是一个代理。
从运用方来看：
正向代理是阅读器端停止配置的，与效劳器端有关，甚至可以对效劳端隐藏。
反向代理是效劳器端配置的，对阅读器端是透明的。
应用代理完成跨域
完成原理
对正向代理效劳器停止配置，当获取非接口数据时，让代理效劳器指向开发者本机的资源。当拜访接口时，拜访后端接口数据。
相当于大佬让小弟把酱排骨饭外面的饭和酱排骨分开买，饭本人家煮，酱排骨才去饭店买。
顺序运转进程
阅读器拜访页面，假定拜访淘宝页面：taobao.com/index.html(假定这个页面中调用了taobao.com/api/getNew获取最新商品的接口)
taobao.com/index.html央求经过代理效劳器，依据配置，index.html页面央求127.0.0.1:3000
127.0.0.1:3000前往index.html文件给阅读器。
阅读器运转index.html页面，发起taobao.com/api/etNew央求。
taobao.com/api/getNew央求经过代理效劳器，但由于没有对这个接口停止特殊配置，会正常拜访淘宝效劳器中的接口。
淘宝效劳器接遭到taobao.com/api/getNew央求，反省央求头的hosts字段，发现是taobao.com，没有跨域，将结果前往给代理效劳器。
代理效劳器拿到结果，前往给阅读器，阅读器停止解析显示。
代理配置(以mac下的charles为例)
翻开charles的映射关系表【charles->tool->Map Remote】。
点击add可以添加映射关系。
点击 ? 符号，可以进入配置规则引见页面。
留意：
婚配taobao.com/api/ 的配置项要放在婚配taobao.com/ 的配置项前，让婚配API的优先级更高。否则将只婚配到taobao.com/*的配置。
假设接口央求中，有触及到https协议的，需求提早在电脑上安装charles的证书 。
chrome系阅读器的央求是不经过charles代理的，这时需求设置电脑上的网络设置，设置代理地址为charles。
微信开发者工具是不走系统代理的，需求额外设置。【微信开发者工具-》设置-》代理-》指向代理效劳器】
应用反向代理完成跨域
反向代理需求用到nginx，其详细引见请看
完成原理
原理大体相反，但是处置的端不同，反向代理真实效劳器端停止处置。首先修正hosts文件，将域名指向开发者的电脑本身，
把本人伪装成效劳端，再经过nginx对不同的央求停止转发，把静态资源指向开发者本地电脑的资源，将接口指向实践的效劳器。
相当于把饭店设置在了黑社会的楼下，去楼下买酱排骨饭的时分，饭店饭本人做，酱排骨则偷偷跑去别的饭店买。
代理配置
设置hosts文件，将目的域名指向本机。
编辑nginx配置，对不同的资源央求，指向到对应地址。异样的，将静态资源指向本机效劳，将接口指向真正的效劳器。
顺序运转进程
阅读器拜访页面，假定拜访淘宝页面：taobao.com/index.html
taobao.com域名解析先经过hosts文件配置，发现taobao.com域名指向127.0.0.1，则向本机发起央求。
nginx接纳到taobao.com/index.html央求，依据nginx的配置，将把这个央求转发给127.0.0.1:3000。
阅读器拿到index.html文件，发起taobao.com/api/getNew央求
nginx接纳到taobao.com/api/getNew央求央求，依据nginx的配置，将把这个央求转发给真正的淘宝效劳器中。
淘宝效劳器将数据前往给nginx，再前往给阅读器执行。
复杂的比照
运用charles等正向代理方式比较复杂，需求掌握的知识点也比较少。但同时其可配置性较弱，更适宜小型项目运用。
运用nginx的反向代理则相对复杂一些，需求了解基本的nginx配置。但其可配置性较强，支持URL的正则婚配，设置优先级等，适宜复杂的项目运用
【编辑引荐】
开发者必读 移动端页面优化的10个好办法
现代前端开发技术栈
运用Kotlin来开发Android，这些优缺陷要思索
“在一同，梦飞扬”，2017华为开发者大赛决赛全程直播
Python pyspider的安装与开发
(责任编辑：admin)