(一)主域相同子域不同之document.domain跨域
一、什么是主域名，什么是子域名？
主域名又称一级域名或者顶级域名，由域名主体.域名后缀组成，比如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跨域的更多相关文章
- document.domain跨域
原文:[转载]document.domain跨域 document.domain 用来得到当前网页的域名. 比如在地址栏里输入: javascript:alert(document.domain); ...
- document.domain 跨域问题[转]
document.domain用来得到当前网页的域名.比如打开百度,在地址栏里输入: javascript:alert(document.domain); //www.baidu.com 弹出窗体: ...
- document.domain 跨域问题
document.domain用来得到当前网页的域名. 比如在地址栏里输入:javascript:alert(document.domain); //www.315ta.com我们也可以给docume ...
- 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 ...
- document.domain跨子域
document.domain 用来得到当前网页的域名.比如在地址栏里输入: javascript:alert(document.domain); //www.315ta.com 我们也可以给docu ...
- js 跨域的问题 （同一个主域名不同的二级域名下的跨域问题） 解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
- JavaScript跨域总结与解决办法 什么是跨域
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- jsonp跨域请求，动态script标签实现跨域
1.什么是跨域 首先一个域名地址的组成是: http://www.xxx.com:8080/xxx/xxx.jsp 协议子域名主域名端口号请求资源地址 当协议.子域名.主域名.端口号中任意一个不相同时 ...
随机推荐
- scrapy之使用LinkExtractor提取链接
一.概述: 在页面含有少量链接时,使用selector来提取信息就可以,但如果链接特别多时,就需要用LinkExtractor来提取. 二.LinkExtractor构造器的各个参数: 1.allow ...
- CentOS7配置iptables防火墙
CentOS 7中默认是firewalld防火墙,如果使用iptables需要先关闭firewalld防火墙(1.关闭防火墙,2.取消开机启动). #关闭firewalld systemctl sto ...
- 打怪升级之路—Security+认证通关攻略（401还是501）
我花了一个月才把题目过完一遍的(这一个月都上班,下班抽空做几页),这里面走了很多弯路,我把备考过程整理出来希望对大家有帮助. 我是在2019年1月完成的Security+考试,离安全牛课堂直播培训结束 ...
- web服务器的原理
一:什么是web服务器 web服务器是可以向浏览器等Web客户端提供文档的计算机的程序.当web浏览器连接到服务器上并请求文件时,服务器将处理该请求并将文件发送到该浏览器上,附带的信息会告诉浏览器如何 ...
- deepin安装mysql记录
本文转载自http://www.linuxidc.com/Linux/2016-07/133128.htm sudo apt-get install mysql-server apt-get isnt ...
- Numpy系列（十二）- 矩阵运算
numpy模块中的矩阵对象为numpy.matrix,包括矩阵数据的处理,矩阵的计算,以及基本的统计功能,转置,可逆性等等,包括对复数的处理,均在matrix对象中. class numpy.matr ...
- go 闭包程序解读
package main import "fmt" // 下面这函数就是闭包函数(就是返回一个匿名函数的地址的函数,其中要1.定义一个需要保护的局部变量i 2.一个匿名的函数) , ...
- 源码来袭：bind手写实现
JavaScript中的this指向规则 源码来袭:call.apply手写实现与应用 理解建议:如果对this指向规则不了解的话,建议先了解this指向规则,最好还能对call和apply的使用和内 ...
- tolua之wrap文件的原理与使用
什么是wrap文件 每个wrap文件都是对一个c#类的包装,在lua中,通过对wrap类中的函数调用,间接的对c#实例进行操作. wrap类文件生成和使用的总体流程 生成一个wrap文件的流程 这部分 ...
- Aurora的安装和中文配置
转载自: http://blog.csdn.net/wdkirchhoff/article/details/72903885 要用 Aurora 很烦躁. 时不时出问题... 看看以下转载的吧. Au ...