源
源 = 协议 + 域名 + 端口号,两个源完全一致,则称这两个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设置一个独特的字符串以示区分。