纯前端解决跨域问题

【51CTO晃荡】8.26 带你深度懂得清华大年夜学、搜狗基于算法的IT运维实践与摸索

背景

跨域是由浏览器的同源策略引起的，是指页面请求的url地址，必须与浏览器上的url地址处于同域上(即竽暌跪名，端口，协定雷同)。

这是为了防止某域名下的接口被其他域名下的网页不法调用，是浏览器对JavaScript施加的安然限制。

这个办法的出发点是好的，然则法度榜样页面开辟的过程中，却经常给前端开辟者带来麻烦。

解决跨域问题常用的解决筹划有这两个：

然则这两个跨域筹划都存在一个致命的缺点，严重依附后端的协助。

开辟中碰到的每一个接口都须要提前找后端进行特别的处理。并且即使后端愿意协助，某些接口不是随便就能开放的(譬如已经在上线正式情况的接口)。

无论若何，依附后端协助的跨域解决筹划都邑在必定程度上限制前端开辟的进度。

那么竽暌剐没有前端自力就能实现的跨域筹划呢?有的，我们可以应用「代劳」或「反向代劳」技巧来实现开辟中的跨域问题。

代劳

代劳，也称正向代劳，意思是一个位于客户端和目标办事器(target server)之间的办事器，为了大年夜目标办事器取得内容，客户端向代理发送一个请求并指定目标(目标办事器)，然后代劳向目标办事器转交请求并将获得的内容返回给客户端。

应用:

因为前端开辟过程中，静态资本是放在本地电脑上的，拜访这些资本平日经由过程IP方法(127.0.0.1)或者localhosts来拜访，与线上办事器地点域名不符，不克不及顺利调用办事的端口。

通俗地说：

说白了，小弟就是个劈叉的，代劳大年夜佬的需求。

对正向代劳办事器进行设备，当获取非接口数据时，让代劳办事器指向开辟者本机的资本。当拜访接口时，拜访后端接口数据。

数据流程：

最经典的应用就是科学上彀：我是一个国内用户，我拜访不了google，然则我能拜访一个喷鼻港的某个代劳办事器。

这个喷鼻港的代劳办事器可以拜访google，于是我先把请求发送到那个代劳办事器，告诉他我须要拜访google，代劳办事器去取内容，最后返回给我。

就比如，大年夜佬被抓起来坐牢了，不克不及出去买敬佩骨，只好请渺小弟去买回来。

百度百科的解释如下：

代劳与反向代劳

反向代劳(Reverse Proxy)方法是指以代劳办事器来接收internet上的连接请求，然后将请求转发给内部收集上的办事器，并将大年夜办事器上获得的结不雅返回给internet上请求连接的客户端，此时代劳办事器对外就表示为一个反向代劳办事器。

数据流程：

通俗地说：

「浏览器」可以看作门客，「【反向代劳办事器-》处理数据的办事器】」章一?整体可以看作饭铺，个中「反向代劳办事」相当于点单的办事员。「处理数据的办事器」可以懂得为是厨师。

在外部看来，「代劳办事器」和「处理数据的办事器」是一个整体。就比如，门客只会去饭铺吃饭，而不是去找厨师吃饭(即对于浏览器来说，达到反向代劳办事器已经完成义务了，后面的操作则由反向代劳办事器负责)。

具体饭铺怎么操作，对门客是透明的。有可能某个办事员即当办事器也当厨师(即反向代劳办事器和处理数据的办事器是同一台PC机)。

弥补一下，没有反向代劳，就比如没有了办事员，门客直接向厨师要吃的。譬如，你饿了，直接叫妈妈做饭是一样的(少了下订单的步调)

比较

大年夜用处上来讲：

大年夜安然性来讲：

大年夜应用方来看：

应用代劳实现跨域

实现道理

相当于大年夜佬让小弟把敬佩骨饭琅绫擎的饭和敬佩骨分开买，饭本身家煮，敬佩骨才去饭铺买。

反向代劳须要用到nginx，其具体介绍请看 http://www.nginx.cn/doc/http://www.nginx.cn/doc/

法度榜样运行过程