欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

跨域方式

程序员文章站 2022-06-17 08:19:28
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 服务通讯。