同源与跨域

同源策略

浏览器之所以如此安全是因为有同源策略，同源策略让非同源的网址不能访问必须协议和端口以及域名相同才可以，http://www.example.com/dir/page.html只要.com的前部分相同就可以了。同源策略的目的是：为了保证用户信息安全，防止恶意网站窃取数据。

实现跨域

Cookie（只适用于cookie窗口）

如果两个网页一级域名相同只是次级域名不同，浏览器通过设置document。domain共享cookie，注意两个页面都需要设置同样的document.domain = 'example.com';设置完成之后会将端口重置为null，然后AB网页都可以访问了。

document.cookie = "test1=hello";
var allCookie = document.cookie;

window.postMessage()

html5中引入了一个全新的API:跨域文档通信API

// 父窗口打开一个子窗口
var popup = window.open('http://bbb.com', 'title');
// 父窗口向子窗口发消息
popup.postMessage('Hello World!', 'http://bbb.com');

  window.addEventListener('message',function(e){
     
            console.log(e.data)
        },false)

// 子窗口向父窗口发消息
window.opener.postMessage('Nice to see you', 'http://aaa.com');

AJSA实现跨域

JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单易用，没有兼容性问题，老式浏览器全部支持，服务端改造非常小。

1. 第一步：请求的脚本里的callback参数是告诉服务区，客户端的回调函数名称。
2. 第二步：服务器收到请求后，拼接一个字符串，将JSON数据放在函数名里面
3. 第三步：客户端将获取的数据作为代码解析，因为浏览器认为这是《script》标签请求的脚本内容。这时，客户端只要定义了bar函数，就能在该函数里面拿到服务器端的数据。

WebSocket

webSocket是一种通信协议，使用ws：//（非加密）和wss://（加密）作为协议前缀，该协议不实行同源策略，只要服务器支持就可以用它实现跨源通信。

CORS

它是WSC标准属于跨源AJAx请求的根本解决方法，相比JSONP只能发get请求，它能发任何类型请求。

简单请求

简单请求就是简单的请求方法（get，head，post）和简单的头信息。
对于简单请求，浏览器直接发出CORS请求，具体来说就是添加一个Origin字段。

非简单请求

以上内容参考与此处

cors详细介绍