一、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的途径。正向代理还可以使用缓冲特性减少网络使用率。
- 反向代理的典型用途是为后端的多台服务器提供负载平衡，或为后端较慢的服务器提供缓冲服务。
- 从安全性来讲：
正向代理允许客户端通过它访问任意网站并且隐藏客户端自身，因此你必须采取安全措施以确保仅为经过授权的客户端提供服务。
反向代理对外都是透明的，访问者并不知道自己访问的是一个代理。
从使用方来看：
正向代理是浏览器端进行配置的，与服务器端无关，甚至可以对服务端隐藏。
反向代理是服务器端配置的，对浏览器端是透明的。
利用正向代理实现跨域
实现原理
对正向代理服务器进行配置，当获取非接口数据时，让代理服务器指向开发者本机的资源。当访问接口时，访问后端接口数据。
相当于大佬让小弟把酱排骨饭里面的饭和酱排骨分开买，饭自己家煮，酱排骨才去饭店买。
程序运行过程
- 浏览器访问页面，假设访问淘宝页面：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的正则匹配，设置优先级等，适合复杂的项目使用。
