跨域方式
程序员文章站
2022-03-07 16:17:13
http://www.ruanyifeng.com/blog/2016/04/same origin policy.html document.domain + iframe 实现父页面与其内部 iframe 页面通讯,要求一级域名相同 两个页面设置 document.domain 为相同的一级域名 ......
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 服务通讯。