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

主域名又称一级域名或者顶级域名，由域名主体.域名后缀组成，比如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. redis jedis使用

    jedis就是集成了redis的一些命令操作,封装了redis的java客户端.提供了连接池管理.一般不直接使用jedis,而是在其上再封装一层,作为业务的使用.如果用spring的话,可以看看spr ...

  2. gcc __thread关键字

    https://blog.csdn.net/xj178926426/article/details/54345449 EventLoop.cpp __thread EventLoop* t_loopI ...

  3. I/O模型

    目录: IO模型 阻塞IO 非阻塞IO IO多路复用 异步IO 总结: 1.阻塞IO模型 多线程 多进程 线程池 进程池 全是阻塞IO 2.非阻塞IO 协程是一种非阻塞IO 1.setblocking ...

  4. SQLMAP注入教程-11种常见SQLMAP使用方法详解

    sqlmap也是渗透中常用的一个注入工具,其实在注入工具方面,一个sqlmap就足够用了,只要你用的熟,秒杀各种工具,只是一个便捷性问题,sql注入另一方面就是手工党了,这个就另当别论了.今天把我一直 ...

  5. 出现Failed to get convolution algorithm的解决方法

    当运行卷积神经时出现了问题:Failed to get convolution algorithm. This is probably because cuDNN failed to initiali ...

  6. sessionStorage数组、对象的存储和读取

    一个对象的demo如下: var obj = { name:"name", age:18, love:"美女" } sessionStorage.setItem ...

  7. @ReponseBody返回的json中文乱码-遁地龙卷风

    我在mvc配置文件中加上下面这个配置就好了 <mvc:annotation-driven></mvc:annotation-driven>,需要在开头引用如下命名空间xmlns ...

  8. JS获取当月第一天和最后一天

    /** * 获取当前月的第一天 */function getCurrentMonthFirst(){ var date=new Date(); date.setDate(1); return date ...

  9. L1-Day2

    L1-Day21.明智的人从来不生气. [我的翻译]A wise man is never angry. [标准答案]A wise man never gets angry. [对比分析]be和get ...

  10. Spring系列(六) Spring Web MVC 应用构建分析

    DispatcherServlet DispatcherServlet 是Spring MVC的前端控制器名称, 用户的请求到达这里进行集中处理, 在Spring MVC中, 它的作用是为不同请求匹配 ...