跨域（CORS JSONP）

源

源 = 协议 + 域名 + 端口号，两个源完全一致，则称这两个url同源。

同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

我X这谁看得懂，说人话！！！

就是浏览器故意设计的一个功能限制，让两个不同源的JS无法获取对方的数据资源。

但是，在实际应用中，我们往往需要向不同源的网站获取数据（合法的），那浏览器又给我们设置了这么一个坎，我们要怎么解决呢？

---

1.CORS

如果两个网站之间要共享数据（假设A网站要获取B网站的数据）

浏览器说：“行吧，你们提前告我一声就可以”，

我：“噢？那咋用？？”

浏览器：“在B网站的相应里头写上A网站的网址就好了”

我：“okok，具体咋写？”

浏览器：“response.setHeader('Access-Control-Allow-Origin','B网站网址')，具体看文档去”

假如你需要兼容IE，很不幸IE6 7 8 9对CORS都不兼容，IE就是躺在前端路上的一个大坑！

CORS浏览器兼容表

在讲JSONP之前，我想先引入一个问题：

既然不同源之间无法访问数据，那我们用script引入的CSS、JS，又是怎么显示的呢？这不是跟上面的内容冲突了吗？？？

答：实际上，因为我们只引用了他的文件，并不知道其中的内容与数据，就不会被浏览器阻止，就像你并不知道一个img图片的JS第一个字符是啥一样。

---

2.JSONP（对IE时代的妥协）

JSONP就像上面的问题一样，前端大神们为了搞定IE，群策群力后想到了一个方案：我们可以创建一个JS,然后里面包着我想要的数据，这样我只需引用这个JS就可以了，并不需要读取他。妙啊！开搞！

使用步骤：（假设A网站要获取B网站的数据）

#在B中创建一个JS文件X.js，将数据写入

#A中使用script引用X.js

#A事先定义好一个http://window.xxx函数，然后执行X.js，拿到数据。http://window.xxx函数就是一个回调

为了保证获取的数据之间不冲突不重复，我们就用callback设置一个独特的字符串以示区分。

具体实现代码请点击链接