前端解决跨域的三种方法

纯前端解决跨域问题

情况

跨域是由于电脑浏览器的同源策略造成的，也就是说网页所要求的url地址必须与电脑浏览器上的url地址在同一个域内(即网站域名、端口号、协议相同)。

是为了更好地防止一个网站域名下的套接字被其他网站域名下的网页非法启用，是计算机浏览器对JavaScript发布的安全限制。

这种对策的立足点是好的，但在程序流网页的开发设计全过程中，往往会给前端工程师带来不便。

由于前端工程师在整个过程中将静态数据资源放在本地电脑上，浏览这些资源一般是基于IP方法(127.0.0.1)或localhosts，与在线服务器所属网站的域名不一致，无法成功启用服务项目的端口号。

跨域问题有两种常见的解决方案:

JSONP:利用脚本识别跨域特性，可以在跨域脚本中立即回调当今脚本的功能。

CORS:服务器在HTTP响应头中设置Access-Control-Allow-Origin的值，以消除跨域限制。

但是这两种跨域规划方案都有一个致命的缺点，就是非常依赖后端的帮助。

设计中遇到的每一个插座都要提前找到后端开发，进行独特的解决方案。而且就算后端开发想帮忙，有些网点也不是随意对外开放的(比如已经发布公告自然环境的网点)。

无论如何，依赖后端开发帮助的跨领域解决方案，都会在一定程度上限制前端工程师的进度。

那么，单靠木头和前端开发就能完成的跨领域计划呢？是的，我们可以使用“代理”或“反向代理”技术来解决开发和设计中的跨领域问题。

代理和反向代理

代理

代理，也称为转发代理，是指位于手机客户端和整体目标服务器之间的服务器。为了更好地从总目标服务器获取内容，手机客户端向代理推送请求并指定总目标服务器，然后代理将请求转发给总目标服务器，并将获取的内容返回给手机客户端。

通俗地说:

移动客户端可以算是黑电巨头，整体目标服务器是餐厅，代理服务器是小弟。

“大哥”喜欢在饭店吃酱排骨饭，只好从弟弟那里买，弟弟去饭店要了酱排骨饭。

餐馆把排骨饭做成了酱，送给弟弟，弟弟最后把排骨饭交给了巨人。

简而言之，弟弟就是个跑腿的，为了豪门的要求而演戏。

信息步骤:

整个流程的信息需求:电脑浏览器-代理服务器-整体目标服务器

数据回传全过程:整体目标服务器-代理服务器-电脑浏览器

使用:

最经典的应用是科学上网:我是中国客户，不能浏览谷歌，但可以浏览中国香港的代理服务器。

这个中国香港的代理服务器可以浏览google，所以我先把请求发给哪个代理服务器，告诉他我需要浏览google。代理服务器拿了内容，终于回来帮我了。

就像，巨人被捕入狱，不能出来买酱排骨。他不得不摆脱他的弟弟，把他们买回来。

反向代理

百科全书的表述如下:

反向代理方式是指代理服务器在互联网上接受连接请求，然后将请求发送给内部互联网上的服务器，将从服务器获得的结果返回给互联网上的手机客户端。此时，代理服务器对外开放时，主要是一个反向代理服务器。

信息步骤:

数据请求全过程:电脑浏览器——【反向代理服务器——【解决数据信息的服务器】

数据回全流程:【解决数据信息的服务器——反向代理服务器】——电脑浏览器

通俗地说:

“电脑浏览器”可以作为一个客户，“[反向代理服务器-数据信息的服务器]”可以作为一个餐厅的整体，其中“反向代理服务”相当于一个点餐的服务员。“解决数据信息的服务器”可以理解为厨师。

顾客赶到餐厅向服务员点餐，但服务员并没有真的下厨。他命令厨师做饭。

厨师为服务员烹饪食物，然后服务员将食物端给顾客。

在外界看来，“代理服务器”和“解决数据信息的服务器”是一个整体。就像那样，客户总是去餐厅而不是厨师(也就是对于电脑浏览器来说，到达反向代理服务器就已经达到了目的，背后的实际 *** 作由反向代理服务器承担)。

实际餐厅如何运作对顾客来说是完全透明的。有可能一个服务员既可以是厨师，也可以是服务器(也就是反向代理服务器和解决数据信息的服务器是同一台PC)。

加满，没有反向代理，就像没有服务员，顾客马上找厨师要菜。比如你饿了，让妈妈马上做饭也是一样的(没有点信息的过程)。

相对

就主要用途而言:

转发代理的典型主要目的是向局域网手机客户端展示如何在服务器防火墙中浏览互联网。转发代理还可以使用缓存功能来降低互联网使用率。

反向代理的典型主要用途是展示几个后端服务器的负载均衡，或者展示后端开发慢的服务器的缓存服务项目。

就安全系数而言:

顺代理允许手机客户端根据它浏览任意网站，并隐藏手机客户端本身。因此，您必须采取安全措施，以确保只有授权的移动电话客户端才能获得服务项目。

反向代理对外开放完全透明，访客不知道自己在浏览一个代理。

从应用程序的角度来看:

转发代理部署在电脑的浏览器端，与服务器端无关，甚至可以对服务器端隐藏。

反向代理在服务器端提供，对计算机浏览器端完全透明。

使用代理完成跨域

完成的基本原则

配备了转发代理服务器，在获取非socket数据信息时，代理服务器偏向于设备的开发者资源。在浏览套接字时，浏览后端开发套接字的数据信息。

相当于巨人让小弟把酱排骨饭里的饭和酱排骨饭分开买，自己在家做米饭，去餐厅买酱排骨。

程序执行的整个过程

电脑浏览器页面访问，假设你访问的是淘宝网的网页:taobao.com/index.html(假设该网页中启用了taobao.com/api/getNew获取全新产品的插座)

Taobao.com/index.html需要通过代理服务器。根据设备，index.html的网页要求是127.0.0.1:3000。

27.0.0.1:3000:返回index.html记录计算机浏览器。

电脑浏览器 *** 纵着index.html的网页，向taobao.com/api/etNew发出请求。

需要Taobao.com/api/getNew通过代理服务器，但是因为这个socket没有唯一的设备，所以会在淘宝服务器正常浏览socket。

淘宝服务器接受了taobao.com/api/getNew's的请求，检查了请求头中的hosts字段名，发现是taobao.com，没有跨域，将结果返回给代理服务器。

服务器获得结果并将其返回给计算机浏览器，浏览器分析并显示信息。

装备(以mac下的charles为例)

打开查尔斯的投影关系表[查尔斯->:工具->；地图遥控器】.

单击添加以添加投影关联。

点一下？标志，可以进入配备标准详细介绍页面。

注意:

taobao.com/api/的匹配项应该放在taobao.com/,的匹配项之前，以便匹配API具有更高的优先级。否则只会配taobao.com/*.的设备

如果socket要求中涉及到https协议，必须提前在电脑上安装charles的资格证书。

chrome电脑浏览器的需求并不是查尔斯所代表的。此时必须设置好电脑的网络连接设置，代理的详细地址应该是charles。

开发者的微信专用工具不动系统软件代理，所以必须另外设置。【微信开发者专用工具-】设置-"代理-"首选代理服务器】

使用反向代理完成跨域

反向代理必须采用nginx，其详细说明可以在http://www.nginx.cn/doc/http://www.nginx.cn/doc/.找到

完成的基本原则

基本原理大致相同，但求解方不同。反向代理确实解决了服务器端的问题。首先更改hosts文档，将域名跳转到开发人员的计算机本身，

把自己打扮成服务器，然后根据nginx的不同要求进行分享。静态数据资源偏向于开发者本地计算机上的资源，套接字偏向于具体的服务器。

相当于把餐厅设在黑势力的楼底下，在楼底下买酱排骨。餐厅自己煮米饭，酱排骨悄悄去别的餐厅买。

配备代理人

设置hosts文档，将整个目标域名跳转到该设备。

写nginx设备，资源需求不同，偏向匹配的详细地址。静态数据资源偏向设备服务项，套接字偏向真实服务器。

程序执行的整个过程

电脑浏览器页面访问，假设浏览淘宝网站页面:taobao.com/index.html

Taobao.com域名分析过主机文档，发现taobao.com的域名偏向127.0.0.1，就会问设备。

NGX收到来自taobao.com/index.html,的请求，根据nginx的设备，它会将该请求发送到127.0.0.1:3000。

计算机浏览器获得index.html文件并发出taobao.com/api/getNew请求。

NGX已经收到了来自taobao.com/api/getNew,的请求，根据nginx的设备，这个请求将被发送到真正的淘宝服务器。

淘宝服务器将数据信息返回给nginx，再返回给电脑浏览器。

简单比较

应用charles等正向代理方法非常简单，必须掌握的知识点很少。另外可以差装备，所以比较适合中小型新项目。

nginx的反向代理应用比较复杂，需要掌握基本的nginx设备。但具有很强的可配置性，适合URL的常规匹配，设置优先级等。适用于复杂的新项目应用。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/zz/768915.html