当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 跨域方式

跨域方式

2018年06月29日  | 移动技术网IT编程  | 我要评论

邓九云微博,上流社会130615,地震勘探

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 服务通讯。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网