跨域

什么是跨域

根源：来自浏览器的同源策略

定义：当一个请求的URL的协议、域名和端口三者之间有任意一个与当前页面的URL不同的时候发生跨域

现象：发生跨域后，以下三种请求方式无法继续：

现象
无法操作非同源网页的DOM结构
无法操作非同源网页的DOM结构
无法向非同源URL发送AJAX请求(注意：src、href 等是可以的)

解决办法

设置相同的document.domain

浏览器检查页面是否同源是基于document.domain来实现的，所以将两个页面设置相同的document.domain就可以实现两个页面间的共享cookie

document.domain = "test.com"

跨文档通信API：window.postMessage()

// 通常打开子窗口的方式
window.open("https://test.com","data")

// 使用api
// 注意，子窗口同样可以通过该方法向父窗口发送消息
openWindow.postMessage("data","https://test.com")

// 监听message时间
window.addEventListener('message', function(e){
	console.log(e.source); // e.source 发送消息的窗口
  	console.log(e.origin); // e.origin 消息发向的网址
 	 console.log(e.data);  // e.data   发送的消息
})

使用JSONP来进行通信(只支持GET请求)

// 将请求url写在script标签中，因为src、href等不会出现跨域，并且参数中有一个callback参数来指定回调方法
<script src="http://test.com/1?callback=doSuccess"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function doSuccess(data){
        // 在这里就可以获取
    }
</script>

CORS：Cross-Origin Resource Sharing

1.首先前台需要判断是否支持cors:

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
 
    // 此时即支持CORS的情况
    // 检查XMLHttpRequest对象是否有“withCredentials”属性
    // “withCredentials”仅存在于XMLHTTPRequest2对象里
    xhr.open(method, url, true);
 
  } else if (typeof!= "undefined") {
 
    // 否则检查是否支持XDomainRequest，IE8和IE9支持
    // XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式
    xhr = new XDomainRequest();
    xhr.open(method, url);
 
  } else {
 
    // 否则，浏览器不支持CORS
    xhr = null;
 
  }
  return xhr;
}
 
var xhr = createCORSRequest('GET', url);
if (!xhr) {
  throw new Error('CORS not supported');
}

然后服务器主要是来设置Access-Control-Allow-Origin