同源与跨域资源共享

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

同源是指

• 协议相同
• 域名相同
• 端口相同

限制范围

• Cookie、LocalStorage 和 IndexDB 无法读取。
• DOM 无法获得。
• AJAX 请求不能发送。

一级域名相同，二级域名不同时共享Cookie

1. 设置相同的document.domain
2. 服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名

解决跨域问题

1. 片段识别符

把信息加在URL的#后面，子窗口监听haschange事件

window.onhaschange = () => {
  let message = window.location.hash;
}

子窗口改变父窗口片段识别符

parent.location.href = target + "#" + hash

2. 将信息写入子窗口的window.name中

3. HTML5的window.postMessage

window.addEventListener('message', function(e) {
  if (event.origin !== 'http://aaa.com') {
    event.source.postMessage('Hello', event.origin);
  } else {
    console.log(event.data);
  }
},false);

4. JSONP，网页通过添加一个script元素，向服务器请求JSON数据，只能是GET请求
5. WebSocket
6. 向跨源服务器发出XMLHttpRequest请求，服务器端实现CORS

• 简单请求：

  Access-Control-Allow-Origin: Origin/* 
  Access-Control-Allow-Credentials: true //允许发送Cookie，在请求中要设置xhr.withCredentials=true
  Access-Control-Expose-Headers: field //指定可以取到的字段

• 非简单请求：

  例如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json都是非简单请求。
  非简单请求的CORS会在正式通信之前，增加一次”预检”请求（preflight），浏览器向服务器发送一个OPTIONS请求，只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

---

参考链接：
浏览器同源政策及其规避方法
跨域资源共享 CORS 详解