您好、欢迎来到现金彩票网!
当前位置:678彩票 > 服务器端 >

纯前端解决跨域问题

发布时间:2019-05-13 06:19 来源:未知 编辑:admin

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

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

  这个措施的出发点是好的,但是程序页面开发的过程中,却常常给前端开发者带来麻烦。

  由于前端开发过程中,静态资源是放在本地电脑上的,访问这些资源通常通过IP方式(127.0.0.1)或者localhosts来访问,与线上服务器所在域名不符,不能顺利调用服务的端口。

  开发中遇到的每一个接口都需要提前找后端进行特殊的处理。而且即使后端愿意帮忙,某些接口不是随便就能开放的(譬如已经在上线正式环境的接口)。

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

  那么有没有前端独立就能实现的跨域方案呢?有的,我们可以利用「代理」或「反向代理」技术来实现开发中的跨域问题。

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

  最经典的应用就是科学上网:我是一个国内用户,我访问不了google,但是我能访问一个香港的某个代理服务器。

  这个香港的代理服务器可以访问google,于是我先把请求发送到那个代理服务器,告诉他我需要访问google,代理服务器去取内容,最后返回给我。

  反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

  「浏览器」可以看作食客,「【反向代理服务器-》处理数据的服务器】」这一个整体可以看作饭店,其中「反向代理服务」相当于点单的服务员。「处理数据的服务器」可以理解为是厨师。

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

  具体饭店怎么操作,对食客是透明的。有可能某个服务员即当服务器也当厨师(即反向代理服务器和处理数据的服务器是同一台PC机)。

  补充一下,没有反向代理,就好比没有了服务员,食客直接向厨师要吃的。譬如,你饿了,直接叫妈妈做饭是一样的(少了下订单的步骤)

  对正向代理服务器进行配置,当获取非接口数据时,让代理服务器指向开发者本机的资源。当访问接口时,访问后端接口数据。

  相当于大佬让小弟把酱排骨饭里面的饭和酱排骨分开买,饭自己家煮,酱排骨才去饭店买。

  匹配api/ 的配置项要放在匹配/ 的配置项前,让匹配API的优先级更高。否则将只匹配到taobao.com/*的配置。 如果接口请求中,有涉及到https协议的,需要提前在电脑上安装charles的证书 。 chrome系浏览器的请求是不经过charles代理的,这时需要设置电脑上的网络设置,设置代理地址为charles。

  原理大体相同,但是处理的端不同,反向代理实在服务器端进行处理。首先修改hosts文件,将域名指向开发者的电脑本身,

  把自己伪装成服务端,再通过nginx对不同的请求进行转发,把静态资源指向开发者本地电脑的资源,将接口指向实际的服务器。

  相当于把饭店设置在了黑社会的楼下,去楼下买酱排骨饭的时候,饭店饭自己做,酱排骨则偷偷跑去别的饭店买。

  每日头条、业界资讯、热点资讯、八卦爆料,全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与,TechWeb官方微博期待您的关注。

http://ps-stores.com/fuwuqiduan/234.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有