博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器跨域解决方案
阅读量:5902 次
发布时间:2019-06-19

本文共 2918 字,大约阅读时间需要 9 分钟。

同源政策是指如果两个网站不同源。则两网站不能访问对方的:
1.cookie,IndexDB,LocalStorage2.Dom节点3.Ajax请求不能发送
  • 那同源需要满足什么呢?

    • 协议相同

    • 域名相同

    • 端口相同

  • 首先我们先来说说常用的ajax跨域需求

    • JSONP(JSONP只能发送get请求)

    JSONP是客户端与服务端跨域通信的常用方法,简单实用,兼容老式浏览器1.网页动态插入script标签function addScriptTag(src) {  var script = document.createElement('script');  script.setAttribute("type","text/javascript");  script.src = src;  document.body.appendChild(script);}window.onload = function () {  addScriptTag('http://example.com/ip?callback=foo');}function foo(data) {  console.log('Your public IP address is: ' + data.ip);};2.服务器收到这个请求后,会将数据放在回调函数的参数位置返回:foo({  "ip": "8.8.8.8"});
    • WebSocket

      WebSocket支持不同源政策

  • Cookie

    Cookie是服务器写入浏览器的信息,必须是同源网页才能共享。不过一级域名相同,二级域名不同,允许通过设置document.domain共享Cookie。
    • 两个页面都设置document.domain = 'liuwen.com';

    • 其中一个页面设置 document.cookie = 'name = louden'

    • 另一个页面读这个cookie:var allCookie = document.cookie;

  • iframe

    如果两个网页不同源,就无法拿到对方的DOM,典型的例子就是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。

  • 父窗口获取子窗口:

document.getElementById("myIFrame").contentWindow.document
  • 子窗口获取父窗口:

window.parent.document.body

如果两个窗口一级域名相同,只是二级域名不同,那么设置document.domain即可。

如果是完全不同源的网站,目前有三种方法,可以解决跨域窗口的通信问题。

- 片段标示符    - window.name    - 跨文档通信API
  • 片段标示符

片段标示符是URL的#后面的部分,比如

http://163.com/a.html#fragment的#fragment,如果只是改变片段标示符,页面不会重新刷新。

  • 父窗口可以把信息,写入子窗口的片段标示符:

var src = originURL + '#' + data;document.getElementById('myIFrame').src = src;
  • 子窗口可以通过监听hashchange事件得到通知:

window.onhashchange = checkMessage;function checkMessage() {  var message = window.location.hash;  // ...}
  • 同样的,子窗口也可以改变父窗口的片段标示符:

parent.location.href= target + "#" + hash;window.name

浏览器窗口有window.name属性,这个属性最大的特点是,无论是否同源,只要在同一个窗口里,前一个页面设置了这个属性,后一个网页可以读取它。

  • 父窗口先打开一个子窗口,载入一个不同源的页面,该网页将信息写入window.name属性:

window.name = data;
  • 子窗口跳回一个与主窗口同域的网址:

location = 'http://parent.url.com/xx.html';
  • 然后,主窗口就可以读取子窗口的window.name了:

var data = document.getElementById('myFrame').contentWindow.name;

优点是window.name容量很大,可以放置非常长的字符串;缺点是必须监听子窗口window.name属性值的变化,影响页面性能。

window.postMessage

HTML5的全新API:跨文档通信API。

父窗口

向子窗口
发消息,调用postMessage方法就可以了:

var popup = window.open('', 'title');

popup.postMessage('Hello World!', '');

posetMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即”协议 + 域名 + 端口”。也可以设为*,表示不限制域名,向所有窗口发送。

  • 子窗口向父窗口发送消息的写法类似:

window.opener.postMessage('Nice to see you', 'http://aaa.com');
  • 父窗口和子窗口都可以通过message事件,监听对方的消息:

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

message事件的事件对象event,提供以下三个属性:

- event.source:发送信息的窗口    - event.origin:信息发向的网址    - event.data:信息内容

下面可以看看几个例子:

  • 子窗口通过event.source属性引用父窗口,然后发送信息:

window.addEventListener('message', receiveMessage);function receiveMessage(event) {  event.source.postMessage('Nice to see you!', '*');}
  • event.origin属性可以过滤不是发送本窗口的信息:

window.addEventListener('message', receiveMessage);function receiveMessage(event) {  if (event.origin !== 'http://aaa.com') return;  if (event.data === 'Hello World') {      event.source.postMessage('Hello', event.origin);  } else {    console.log(event.data);  }}

转载地址:http://pfupx.baihongyu.com/

你可能感兴趣的文章
Prometheus : 入门
查看>>
使用 PowerShell 创建和修改 ExpressRoute 线路
查看>>
在C#中获取如PHP函数time()一样的时间戳
查看>>
Redis List数据类型
查看>>
大数据项目实践(四)——之Hive配置
查看>>
初学vue2.0-组件-文档理解笔记v1.0
查看>>
Centos7安装Gitlab10.0
查看>>
上传图片预览
查看>>
lagp,lacp详解
查看>>
LVS之DR模式原理与实践
查看>>
Docker的系统资源限制及验证
查看>>
c++ ios_base register_callback方法使用
查看>>
Java中为什么需要Object类,Object类为什么是所有类的父类
查看>>
angularjs-paste-upload
查看>>
linux基础命令 head
查看>>
objective c:import和include的区别, ""和<>区别
查看>>
The Shared folder with you
查看>>
poj 2234 Matches Game
查看>>
sax方式解析XML学习笔记
查看>>
Springboot配置(上)
查看>>