一、什么是主域名，什么是子域名？

主域名又称一级域名或者顶级域名，由域名主体.域名后缀组成，比如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. Django分布式任务队列celery的实践

    不使用数据库作为 Broker Broker 的选择大致有消息队列和数据库两种,这里建议尽量避免使用数据库作为 Broker,除非你的业务系统足够简单.在并发量很高的复杂系统中,大量 Workers ...

  2. Ubuntu16.04 安装g++6

    https://blog.csdn.net/qq_34877350/article/details/81182022 1.安装gcc-6: sudo apt-get update && ...

  3. filebeat+logstash配置

    一. filebeat.yml的配置 filebeat.prospectors:- input_type: log paths: - /tmp/logs/optimus-activity-api.lo ...

  4. hotplug/mdev机制

    目录 hotplug/mdev机制 框架 kobject_uevent_env mdev_main make_device mdev.conf 配置文件学习 更改属性 @:创建设备节点之后执行命令 $ ...

  5. 金融量化分析【day112】：量化平台的使用-第一个策略

    一.策略代码 # 导入函数库 import jqdata #初始化函数,设定基准等等 def initialize(context): set_benchmark('000300.XSHG') g.s ...

  6. ACM-ICPC 2018 徐州赛区网络预赛 J Maze Designer（最大生成树+LCA）

    https://nanti.jisuanke.com/t/31462 题意 一个N*M的矩形,每个格点到其邻近点的边有其权值,需要构建出一个迷宫,使得构建迷宫的边权之和最小,之后Q次查询,每次给出两点 ...

  7. 闭包创建自己的 plugin 示例 加载 loading

    plugin  插件 什么是 plugin? 实现一个功能,与主应用程序分离,减少主应用程序的大小,高复用,可维护 制作过程中,一定要避免依赖其他的元素,减少 id 等的使用,避免与页面中其他内容冲突 ...

  8. [译]Ocelot - Configuration

    原文 这里有一个配置的样例.配置主要有两个部分.一个是ReRoutes数组,另一个是GlobalConfiguration.ReRoute告诉Ocelot怎么处理上游的请求.Global config ...

  9. luogu P5287 [HNOI2019]JOJO

    传送门 神™这题暴力能A,这出题人都没造那种我考场就想到的数据,难怪我的垃圾做法有分 先考虑没有撤销操作怎么做,因为每次插入一段一样的字符,所以我们可以把\(x\)个字符\(c\)定义为\(cx\), ...

  10. Python mac安装mysqlclient的一个bug

    这是一个来自mysql官方的bug,反正我是看不懂. shuais-MBP:wxapp dandyzhang$ pipenv install mysqlclient Installing mysqlc ...