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

主域名又称一级域名或者顶级域名，由域名主体.域名后缀组成，比如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. HDU2859 Phalanx （动态规划）

    Today is army day, but the servicemen are busy with the phalanx for the celebration of the 60th anni ...

  2. Luogu P1654 OSU!

    写法和CF235B Let's Play Osu!非常相似.但是这个题厉害就厉害在统计的贡献里面有一个平方的期望,而这个平方的期望和期望的平方是完全不一样的,需要另外统计,逻辑上仔细想一想就会明白. ...

  3. (二分查找 拓展) leetcode 69. Sqrt(x)

    Implement int sqrt(int x). Compute and return the square root of x, where x is guaranteed to be a no ...

  4. tty

    tty一词源于Teletypes,或teletypewriters,原来指的是电传打字机,是通过串行线用打印机键盘通过阅读和发送信息的东西,后来这东西被键盘和显示器取代,所以现在叫终端比较合适. 终端 ...

  5. 剑指Offer_编程题_25

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  6. HDU 1051(处理木棍 贪心)

    题意是处理一批木棍,如果当前处理的木棍长度和重量均大于前一根木棍的长度和重量,则处理当前木棍花费为 0,否则花费为 1. 用结构体存储木棍信息,将木棍按照长度从小到大排序,若长度相等则按照重量从小到大 ...

  7. java代码调用第三方接口

    一.利用httpclient来字符串参数(url是第三方接口,不带参数,如:http://192.168.16.200:8081/faceInfo/list,param是url后面所要带的参数) pu ...

  8. day 17 - 2 递归函数练习

    1.斐波那契   问第n个斐波那契数是多少 #这个效率是低的,最好不要使用双递归 def fib(n): if n == 1 or n == 2: return 1 return fib(n-1) + ...

  9. Linux 踩过的坑系列-01

    关于默认网关的添加.记得楼主之前有一次,无意之间,也不知道做了什么删除文件里面内容的操作,配置好静态IP之后上不了外网.翻阅个各种资料都是没有找到问题.最后发现问题在于配置的虚拟机网卡文件的网关打错了 ...

  10. Angular7

    1.绑定html 在ts里面自定义一个html变量 html = '<a> 这是html变量 </a> '; 在html打印出来 直接打印:{{html}} <br /& ...