一、什么是同源？
1995年由Netscape提出，现在所有浏览器都支持这一政策。
两个不同的网站无法互相访问同源策略限制的内容。
二、如何确定两个网页同源？
三个相同：
协议相同: http://或https://
域名相同: www.baidu.com
端口号相同: 80端口（默认80端口）
只有有一个不同那将不是同源。
三、设置同源的目的
设置同源策略的⽬的：保护⽤户数据安全，⽅式信息被恶意⻚⾯获取到。
A⽹站是⼀家银⾏，⽤户登录以后，又去浏览其他⽹站。如果其他⽹站可以读取A⽹站的 Cookie，会发⽣什么？
四、同源策略限制的范围
1、Cookie、localStorage、IndexDB⽆法读取。
2、DOM⽆法取得。
3、AJAX请求不能发送。
function addScriptTag(src) {
var script =
document.createElement('script');
script.setAttribute("type","text/
javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/
ip?callback=foo');
}
function foo(data) {
console.log('Your public IP address
is: ' + data.ip);
};
五、ajax规避同源策略
规避同源策略：使用jsonp或者服务器端实现跨域。
一般使用服务器端实现跨域，因为jsonp既需要设置服务器端又要设置浏览器端，成本相对较高。而服务器端则只需要设置服务器端。
1、通过jsonp实现跨域请求
1)html内容：
// 1、创建script标签
var scriptTag = document.createElement('script');
// 2、配置标签属性
scriptTag.type = 'text/javascript';
scriptTag.src = 'http://10.0.156.213/data.php?cb=fn1';
// 3、把标签拼接进文档流
document.head.appendChild(scriptTag);
// 回调函数
function fn1(obj) {
console.log(obj);
}
2）服务器端代码（一般使用PHP写后台代码）
jsonp.png
2、通过服务器端处理跨域
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET','http://wthrcdn.etouch.cn/weather_mini?city=北京',true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
}
}
请求路径上的链接地址一般是公共端口。
