一、什么是主域名,什么是子域名?

主域名又称一级域名或者顶级域名,由域名主体.域名后缀组成,比如cnblogs.com ;

子域名有二级域名,比如www.cnblogs.com。三级域名,比如home.m.cnblogs.com。

二、基本原理

主域相同,子域不同,可以设置document.domain来解决跨域。

1、在http://www.example.com/a.html和http://sub.example.com/b.html两个文件中都加上document.domain = "example.com";

2、通过a.html文件创建一个iframe,去控制iframe的window,从而进行交互。

三、测试步骤

1、先安装nginx

2、创建a.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主域相同子域不同a.html</title>
</head>
<body>
<script>
  document.domain = 'example.com';
  let ifr = document.createElement('iframe');
  ifr.src = 'http://sub.example.com/b.html';
  ifr.style.display = 'none';
  document.body.append(ifr);
  ifr.onload = function() {
    let win = ifr.contentWindow;
    alert(win.data);
  }
</script>
</body>
</html>

3、创建b.html文件

<script>
  document.domain = 'example.com';
  window.data = '传送的数据:1111';
</script>

4、打开http服务器,通过nginx做域名映射。将example.com映射到localhost:8080,sub.example.com映射到localhost:8081上。

5、打开操作系统下的hosts文件,并添加

127.0.0.1 www.example.com
127.0.0.1 sub.example.com

这样在浏览器打开这两个网址后就会访问本地的服务器。之后打开nginx的配置文件:/usr/local/etc/nginx/nginx.conf,并在http模块里添加:

server{
    listen 80;
    server_name www.example.com;
    location / {
        proxy_pass http://127.0.0.1:8080/;
    }
}
server{
    listen 80;
    server_name sub.example.com;
    location / {
        proxy_pass http://127.0.0.1:8081/;
    }
}

6、最后打开浏览器访问http://www.example.com/a.html就可以看到结果。

(一)主域相同子域不同之document.domain跨域的更多相关文章

  1. document.domain跨域

    原文:[转载]document.domain跨域 document.domain 用来得到当前网页的域名. 比如在地址栏里输入: javascript:alert(document.domain); ...

  2. document.domain 跨域问题[转]

    document.domain用来得到当前网页的域名.比如打开百度,在地址栏里输入: javascript:alert(document.domain); //www.baidu.com 弹出窗体: ...

  3. document.domain 跨域问题

    document.domain用来得到当前网页的域名. 比如在地址栏里输入:javascript:alert(document.domain); //www.315ta.com我们也可以给docume ...

  4. Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)

    https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...

  5. document.domain跨子域

    document.domain 用来得到当前网页的域名.比如在地址栏里输入: javascript:alert(document.domain); //www.315ta.com 我们也可以给docu ...

  6. js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  7. JavaScript跨域总结与解决办法 什么是跨域

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

  8. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  9. jsonp跨域请求,动态script标签实现跨域

    1.什么是跨域 首先一个域名地址的组成是: http://www.xxx.com:8080/xxx/xxx.jsp 协议子域名主域名端口号请求资源地址 当协议.子域名.主域名.端口号中任意一个不相同时 ...

随机推荐

  1. yii2 redirect重定向

    redirect使用方法 $this->redirect(array('/site/contact','id'=>12)); //http://www.kuitao8.com/testwe ...

  2. 为什么要写 tf.Graph().as_default()

    首先,去tensorflow官网API上查询 tf.Graph() 会看到如下图所示的内容: 总体含义是说: tf.Graph() 表示实例化了一个类,一个用于 tensorflow 计算和表示用的数 ...

  3. pymongo 使用方法(增删改查)

    #!/usr/bin/env python # -*- coding:utf-8 -*- """ MongoDB存储 在这里我们来看一下Python3下MongoDB的存 ...

  4. Kubernetes之存储

    存储卷概述 容器磁盘上的文件的生命周期是短暂的,这就使得在容器中运行重要应用时会出现一些问题.首先,当容器崩溃时,kubelet 会重启它,但是容器中的文件将丢失——容器以干净的状态(镜像最初的状态) ...

  5. 【Sql Server】SQL SERVER 递归查询

    SQL SERVER 2005之前的版本只能用函数方法实现,SQL SERVER 2005之后新增了CTE功能,可以利用CTE实现递归查询: CTE:公用表达式Common Table Express ...

  6. 分布式监控系统开发【day37】:服务端生成配置数据(四)

    一.目录结构 二.引子与代码 1.客户端获取服务列表接口 1.解决了什么问题 客户端要给我获取服务列表的的时候,他肯定要告诉他是谁?他怎么告诉我,客户端必须有一个id号 Saltsack你装一个客户端 ...

  7. ACM-ICPC 2018 沈阳赛区网络预赛 D Made In Heaven(第k短路,A*算法)

    https://nanti.jisuanke.com/t/31445 题意 能否在t时间内把第k短路走完. 分析 A*算法板子. #include <iostream> #include ...

  8. 2018-2019-2 《Java程序设计》第5周学习总结

    20175319 2018-2019-2 <Java程序设计>第5周学习总结 教材学习内容总结 本周学习<Java程序设计>第六章: 接口 实现接口 接口的UML图 接口回调 ...

  9. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  10. [物理学与PDEs]第1章第2节 预备知识 2.2 Ampere-Biot-Savart 定律, 静磁场的散度与旋度

    1. 电流密度, 电荷守恒定律 (1) 电荷的定向移动形成电流. (2) 电流密度 ${\bf j}$, 是描述导体内一点在某一时刻电流流动情况的物理量, 用单位时间内通过垂直于电流方向的单位面积的电 ...