跨域问题解决方案

[CJianYu]

“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。”而所谓同源，指“域名、协议、端口”相同，只要有一个不相同，则两个网页不同源。

如果两个网页不同源，则有三种行为受到限制：

1.两个网页间不能读取相互间的cookie、localStorage、indexDB
2.不能发起ajax请求
3.无法获取各自的DOM

而开发过程中，我们经常遇到要跨域访问的情况，跨域有如下几个常用的解决方案：

图像Ping

我们知道，标签可以从任何网站中加载图像，没有跨域不跨域的问题。图像Ping就是利用这个标签，动态创建图像，可以与服务器进行简单的单向跨域通信。
应用场景：跟踪用户点击页面或动态广告曝光次数
缺点： 、只能发送get请求、无法访问服务器的响应文本

JSONP

JSONP的原理跟图像Ping的原理类似，我们知道，<script>跟一样，是没有跨域问题的困扰。JSONP是通过动态创建<script>标签来使用，使用的时候将其src属性指定一个跨域的URL。这个方法在开发者中很流行，很大程度上是因为这个方法简单易用，能直接访问相应文本，支持与服务器双向通信。
缺点：如果其他域不安全，除了放弃使用这个方法之外没别的办法；
很难确定JOSNP请求是否失败。

CORS

跨域资源共享（CORS）的基本思想是：使用自定义的http头部让浏览器与服务器进行沟通，由此决定请求或响应应该成功还是失败。比如一个请求 ，内容主体是text/plain，在发送请求的时候，给它附加额外的origin头部，其包含页面源信息，让服务器根据这个信息决定是否响应。比如下面一个origin头部：
Origin: http://www.lazy.com
如果服务器可以接受这个请求，就在Access-Control-Allow-Origin头部回发相同的源信息：
Access-Control-Allow-Origin：http://www.lazy.com

参考链接：https://segmentfault.com/a/1190000011145364