taobao.com/index.html请求经由代劳办事器，根据设备，index.html页面请求127.0.0.1:3000

127.0.0.1:3000返回index.html文件给浏览器。

浏览器运行index.html页面，提议taobao.com/api/etNew请求。

taobao.com/api/getNew请求经由代劳办事器，但因为没有对这个接口进行特别设备，会正常拜访淘宝办事器中的接口。

淘宝办事寡居收到taobao.com/api/getNew请求，检查请求头的hosts字段，发明是taobao.com，没有跨域，将结不雅返回给代劳办事器。

代劳办事器拿到结不雅，返回给浏览器，浏览器进行解析显示。

代劳设备(以mac下的charles为例)

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

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

• 点击 ? 符号，可以进入设备规矩介绍页面。

反向代劳

留意：

• 匹配taobao.com/api/ 的设备项要放在匹配taobao.com/ 的设备项前，让匹配API的优先级更高。不然将只匹配到taobao.com/*的设备。
• 如不雅接口请求中，有涉及到https协定的，须要提前在电脑上安装charles的证书 。
• chrome系浏览器的请求是不经由charles代劳的，这时须要设置电脑上的收集设置，设置代劳地址为charles。

• 微信开辟者对象是不走体系代劳的，须要额外设置。【微信开辟者对象-》设置-》代劳-》指向代劳办事器】

应用反向代劳实现跨域

实现道理

道理大年夜体雷同，然则处理的端不合，反向代劳实袈溱办事器端进行处理。起首修改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的┞俘则匹配，设置优先级等，合适复杂的项目应用

【编辑推荐】

1. 开辟者必读 移动端页面优化的10个好办法
2. 现代前端开起身术栈
3. 应用Kotlin来开辟Android，这些优缺点要推敲
4. “在一路，梦飞扬”，2017华为开辟者大年夜赛决赛全程直播
5. Python pyspider的安装与开辟

【义务编辑：未丽燕 TEL：（010）68476606】

　　推荐阅读

　　“智慧防控圈”让市民安全感满满

【51CTO晃荡】8.26 带你深度懂得清华大年夜学、搜狗基于算法的IT运维实践与摸索 成功侦破一批大年夜案要案本年上半年，全市刑事警情同比降低4%，“两抢”警情同比降低42%，刑事>>>详细阅读

本文标题：纯前端解决跨域问题

地址：http://www.17bianji.com/lsqh/36807.html

 1/2    1