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

主域名又称一级域名或者顶级域名，由域名主体.域名后缀组成，比如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. JavaScript与jQuery关于鼠标点击事件

    即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...

  2. Ubuntu16下Hadoop安装

    1. 安装Ubuntu 2. 新装Ubuntu常用软件安装和系统设置 (1) 安装vim yum install vim (2) 更改hostname为hadoop_master sudo vim / ...

  3. 目前的.NET(C#)世界里，主流的ORM框架

    推荐一些常用的asp.net ORM框架 SqlSugar (国内) Dos.ORM (国内) Chloe (国内) StackExchange/Dapper (国外) Entity Framewor ...

  4. LFYZ-OJ ID: 1011 hanoi双塔问题

    思路 虽然每种大小盘子数量为2,但对总步数的影响只是一个简单的倍数关系而已,递推关系很容易可以总结出来:an=an-1+2+an-1=2(an-1+1),n=1时,a1=2.故递推的过程就是从a1=2 ...

  5. 如何清理Docker占用的磁盘空间?(转载)

    本文转载自https://blog.fundebug.com/2018/01/10/how-to-clean-docker-disk/ , 感谢原作者. 摘要:用了Docker,好处挺多的,但是有一个 ...

  6. [物理学与PDEs]第1章习题7 载流线圈的磁场

    设一半径为 $R$ 的圆周电路上的电流强度为 $I$. 试计算在通过圆心垂直于圆周所在平面的直线上, 由该圆周电路产生的磁场的磁感强度. 解答: 由对称性知在该直线 $l$ 上, ${\bf B}$ ...

  7. $L^p$ 调和函数恒为零

    设 $u$ 是 $\bbR^n$ 上的调和函数, 且 $$\bex \sen{u}_{L^p}=\sex{\int_{\bbR^n}|u(y)|^p\rd y}^{1/p}<\infty. \e ...

  8. SSH框架之hibernate《三》

    Hibernate03     一.多表设计         1.1多表设计的总则             问题:我们为什么要学习多表映射?             答:                ...

  9. 原生js写轮播图效果

    <script> var picarr=[ "pic/lb1.jpg", "pic/lb2.jpg", "pic/lb3.jpg" ...

  10. sql读取 所有表、结构 描述

    需要:读取库里面所有 表.以及表描述. 列.列描述 create PROCEDURE [dbo].[ProGetAllTableName] AS BEGIN --开启事物 BEGIN TRAN tra ...