跨域方式

原文地址：https://www.xingkongbj.com/blog/http/cross-origin.html

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

document.domain + iframe

• 实现父页面与其内部 iframe 页面通讯，要求一级域名相同
• 两个页面设置 document.domain 为相同的一级域名，不包含二级域名

location.hash + iframe

• 实现父页面A与其内部 iframe 页面B通讯，需要与页面A同源的中转页C，并且页面C是通过页面B的 iframe 加载
• 父页面A监听自身 location.hash 的变化。页面A的 iframe 加载通讯页面B，并在地址中加入 #参数
• 通讯页面B监听自身 location.hash 的变化，给出响应，创建 iframe 加载页面C在地址中加入 #回传参数
• 中转页C通过 parent.parent.location.hash 语句来修改父页面A的 location.hash 值，实现通讯

window.name + iframe

• 实现父页面A与其内部 iframe 页面B通讯，需要与页面A同源的中转页C，name 值在不同的域名加载后依旧存在，并且可以支持 2MB
• iframe 加载页面B写入 window.name 并跳转到页面C
• 页面C与页面A同源，可以获取页面C的 window.name 并且返回给页面A

window.postMessage + iframe

• 实现父页面A与其内部 iframe 页面B通讯
• 双方通过 window.addEventListener('message', onMessage, false) 监听数据
• 双方通过在对方的 window 上执行 postMessage('hello world!', "*") 发送数据，要求 postMessage 第二个参数符合对方的域名

CORS

• 页面无法设置
• 服务器返回响应头中设置 Access-Control-Allow-Origin: *
• 服务器返回响应头中设置 Access-Control-Allow-Headers: Origin,X-Requested-With,Content-Type,Accept,Last-Modified
• 服务器返回响应头中设置 Access-Control-Allow-Methods: POST,GET,OPTIONS,HEAD
• Access-Control-Allow-Methods 中不要包含 PUT 和 DELETE 会对安全有影响，GET、POST、HEAD 是基本方法，不设置也会生效。

JSONP

• 动态创建 script 标签，在 src 中加入函数名称参数，并且创建该函数，函数的参数将返回数据。
• 服务器识别 src 中函数名称参数，拼接函数名称并把数据写入函数调用参数中返回。
• script 标签接收服务器返回 js 文件，执行函数调用。

WebSocket

• 浏览器的 API ，提供全双工、双向通信、只能与 WebSocket 服务通讯。