跨域几种解决方案(二)

简介: 跨域几种解决方案(二)

利用正向代理实现跨域

实现原理

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


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

程序运行过程


  • 浏览器访问页面,假设访问淘宝页面: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】。

image.png

image.png

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

image.png

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

image.png

注意

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

image.png

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

image.png


利用反向代理实现跨域


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

实现原理

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

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

代理配置

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

image.png

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

image.png

程序运行过程


  • 浏览器访问页面,假设访问淘宝页面: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的正则匹配,设置优先级等,适合复杂的项目使用。


相关文章
|
6月前
|
前端开发 开发者
前端开发中的跨域资源共享(CORS)解决方案探讨
【2月更文挑战第2天】跨域资源共享(CORS)是前端开发中常见的问题,本文将深入探讨CORS的原理及解决方案,包括简单请求、预检请求以及常用的CORS解决方案,为前端开发者提供深入的理解和应对CORS问题的有效方法。
104 1
|
6月前
|
前端开发 JavaScript 安全
跨域的五种最常见解决方案
跨域的五种最常见解决方案
105 0
|
Web App开发 JSON 前端开发
前端跨域解决方案-汇总
前端跨域解决方案-汇总
149 0
|
19天前
|
JavaScript 前端开发 安全
跨域解决方案有哪些?
本文介绍了多种跨域解决方案,包括JSONP、CORS、postMessage、WebSocket、document.domain+iframe、window.name、location.hash、Node.js代理、Nginx代理和CORS Anywhere。每种方法都有其适用场景和优缺点,如JSONP简单但只支持GET请求,CORS安全但兼容性稍差,WebSocket适用于实时通信但需服务器支持。开发者可根据具体需求选择合适的跨域方案。
24 3
跨域解决方案有哪些?
|
6月前
|
运维 前端开发 JavaScript
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
51 0
|
移动开发 前端开发 JavaScript
前端跨域的解决方案?
前端跨域的解决方案?
104 0
|
6月前
|
前端开发 JavaScript
CORS跨域资源共享及解决方案
CORS跨域资源共享及解决方案
61 0
|
6月前
|
JSON JavaScript 前端开发
跨域的原理及解决方案
同源策略是Web应用程序安全性模型中的重要概念。根据该策略,Web浏览器允许第一个网页中包含的脚本访问第二个网页中的数据,但前提是两个网页具有相同的来源。来源由URI,主机名和端口号的组合定义。此策略可防止一个页面上的恶意脚本通过该页面的DOM(Document Object Model)获得对另一网页上敏感数据的访问。 JSONP 由于同源策略,一般来说位于server1.example.com...
|
移动开发 JavaScript 前端开发
前端常见跨域解决方案(全)
前端常见跨域解决方案(全)
853 0
|
移动开发 前端开发 安全
【前端跨域的解决方案?】
【前端跨域的解决方案?】