跨域几种解决方案

一、JSONP:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数1)jsonp出现背景简介:1、出现跨域的原因:浏览器同源策略导致2、浏览器同源场景:同一协议、同一域名、同一个端口3、类比正常使用场景:script、img、a 的src hrep 标签属性a、举一例分析:img src 获取一张图片 get请求 获取文件流展示到页面上4、josnp利用该原理而产生:a、仅get请求 传参里面包含js函数名称b、接口返回内容里面包含一个js 函数名称c、页面上解析返回内容并调用该js函数5、代码:

二、CORS:服务器设置HTTP响应头中Access-Control-Allow-Origin值,解除跨域限制1、代码

三、通过中间接口转发 避免前端页面出现跨域问题

四、搭建API网关

五、正向代理和反向代理比较

从用途上来讲:正向代理的典型用途是为在防火墙内的局域网客户端提供访问Internet的途径。正向代理还可以使用缓冲特性减少网络使用率。反向代理的典型用途是为后端的多台服务器提供负载平衡,或为后端较慢的服务器提供缓冲服务。从安全性来讲:正向代理允许客户端通过它访问任意网站并且隐藏客户端自身,因此你必须采取安全措施以确保仅为经过授权的客户端提供服务。反向代理对外都是透明的,访问者并不知道自己访问的是一个代理。从使用方来看:正向代理是浏览器端进行配置的,与服务器端无关,甚至可以对服务端隐藏。反向代理是服务器端配置的,对浏览器端是透明的。

利用正向代理实现跨域

实现原理

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

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

程序运行过程

浏览器访问页面,假设访问淘宝页面:http://taobao.com/index.html(假设这个页面中调用了http://taobao.com/api/getNew获取最新商品的接口)http://taobao.com/index.html请求经过代理服务器,根据配置,index.html页面请求127.0.0.1:3000127.0.0.1:3000返回index.html文件给浏览器。浏览器运行index.html页面,发起http://taobao.com/api/getNew请求。http://taobao.com/api/getNew请求经过代理服务器,但由于没有对这个接口进行特殊配置,这个接口会正常访问道淘宝服务器。淘宝服务器接受到http://taobao.com/api/getNew请求,检查请求头的hosts字段,发现是http://taobao.com,没有跨域,将结果返回给代理服务器。代理服务器拿到结果,返回给浏览器,浏览器进行解析显示。

代理配置(以mac下的charles为例)

window上可使用fiddler实现相同功能,可参看这篇文章。

打开charles的映射关系表【charles->tool->Map Remote】。

点击add可以添加映射关系。

点击 ? 符号,可以进入配置规则介绍页面。

注意

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

开发者工具也需要额外设置。【开发者工具-》设置-》代理-》指向代理服务器】

利用反向代理实现跨域

反向代理需要用到nginx,其详细介绍请看这里

实现原理

原理大体相同,但是处理的端不同,反向代理实在服务器端进行处理。首先修改hosts文件,将域名指向开发者的电脑本身,把自己伪装成服务端,再通过nginx对不同的请求进行转发,把静态资源指向开发者本地电脑的资源,将接口指向实际的服务器。

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

代理配置

设置hosts文件,将目标域名指向本机。

编辑nginx配置,对不同的资源请求,指向到对应地址。同样的,将静态资源指向本机服务,将接口指向真正的服务器。

程序运行过程

浏览器访问页面,假设访问淘宝页面:http://taobao.com/index.htmlhttp://taobao.com域名解析先经过hosts文件配置,发现http://taobao.com域名指向127.0.0.1,则向本机发起请求。nginx接收到http://taobao.com/index.html请求,根据nginx的配置,将把这个请求转发给127.0.0.1:3000。浏览器运行index.html文件,发起http://taobao.com/api/getNew请求nginx接收到http://taobao.com/api/getNew请求请求,根据nginx的配置,将把这个请求转发给真正的淘宝服务器中。淘宝服务器将数据返回给nginx,再返回给浏览器执行。

简单的对比

使用charles等正向代理方式比较简单,需要掌握的知识点也比较少。但相应的其可配置性较弱,仅适合中小型项目使用。使用nginx的反向代理则相对复杂一些,需要了解基本的nginx配置。但其可配置性较强,支持URL的正则匹配,设置优先级等,适合复杂的项目使用。