利用正向代理实现跨域
实现原理
对正向代理服务器进行配置，当获取非接口数据时，让代理服务器指向开发者本机的资源。当访问接口时，访问后端接口数据。
相当于大佬让小弟把酱排骨饭里面的饭和酱排骨分开买，饭自己家煮，酱排骨才去饭店买。
程序运行过程
- 浏览器访问页面，假设访问淘宝页面：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的正则匹配，设置优先级等，适合复杂的项目使用。