利用正向代理实现跨域
实现原理
对正向代理服务器进行配置,当获取非接口数据时,让代理服务器指向开发者本机的资源。当访问接口时,访问后端接口数据。
相当于大佬让小弟把酱排骨饭里面的饭和酱排骨分开买,饭自己家煮,酱排骨才去饭店买。
程序运行过程
- 浏览器访问页面,假设访问淘宝页面: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/getNew请求。
- taobao.com/api/getNew请求经过代理服务器,但由于没有对这个接口进行特殊配置,这个接口会正常访问道淘宝服务器。
- 淘宝服务器接受到taobao.com/api/getNew请求,检查请求头的hosts字段,发现是taobao.com,没有跨域,将结果返回给代理服务器。
- 代理服务器拿到结果,返回给浏览器,浏览器进行解析显示。
代理配置(以mac下的charles为例)
window上可使用fiddler实现相同功能,可参看这篇文章。
打开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的正则匹配,设置优先级等,适合复杂的项目使用。