同源策略:
为了安全性,同源策略规定跨域之间的脚本是隔离的。一个域的脚本不能访问和操作另一个域的绝大部分属性和方法。
同域:当两个域具有相同的协议(如http),相同的端口(如80),相同的host(如 www.example.com),那么就可以认为是同域的。
同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上的其他任意文件,就会出现安全隐患。
受到同源策略的影响,跨域资源共享就会收到制约。所以出现了,解决跨域问题的解决办法。
跨域资源共享又可以分为两种:一种是单向的数据请求,还有一种是双向的消息通信。
单向跨域:
JSONP
html 的 script 标签可以加载并执行其他域的Javasciript,于是我们可以通过script标签来动态加载其他域的资源。
// JSONP方式去请求
function requestJSONP(){
// 使用jsonp,进行跨域资源的调用
var getJSONP = function(url,callbackName){
var head = document.getElementsByTagName("head")[0],
script = document.createElement("script");
script.src = url + '?callback=' + callbackName;
script.charset = "utf-8";
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
setTimeout(function(){
head.removeChild(script);
},50);
}
};
head.appendChild(script);
};
var holder = document.getElementById("resource_holder");
var button = document.getElementById("get_resource");
window.handleJSONP = function(data){
console.log(data);
};
button.onclick = function(){
holder.innerHTML = '';
getJSONP("http://music.163.com/api/playlist/detail?id=1612159",'handleJSONP');
};
}