(一)主域相同子域不同之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 协议子域名主域名端口号请求资源地址 当协议.子域名.主域名.端口号中任意一个不相同时 ...
随机推荐
- Django模板
Django模板系统 官方文档 常用语法 只需要记住两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 { 变量名 }} 变量名由字母数字和下划线组成. 点 ...
- GIT-常规操作
本地安装git, 安装文件: Git客户端: 可百度搜索:GIT64位或GIT32位等关键字找到相应的版本进行下载. 本地地址:D:\20-git\Git-2.20.1-64-bit.exe 也可百度 ...
- Hadoop记录-JMX参数
Yarn metrics参数说明 获取Yarn jmx信息:curl -i http://xxx:8088/jmx Hadoop:service=ResourceManager,name=FSOpDu ...
- 第二节：重写（new）、覆写（overwrite）、和重载（overload）
一. 重写 1. 关键字:new 2. 含义:子类继承父类中的普通方法,如果在子类中重写了一个和父类中完全相同的方法,子类中会报警告(问是否显式的隐藏父类的中的方法),如果在子类中的方法前加上new关 ...
- Jenkins 子业务日志拆分分析方法
需求 Jenkins日志打印内容很长,或者并发编译导致,日志内容不容易查看. 对于具体业务失败, 开发者希望看到具体业务自身的日志内容. 解法 tee 命令能够保证, shell命令执行的内容,即往控 ...
- requests.session
# -*- coding: utf-8 -*- """requests.session~~~~~~~~~~~~~~~~ This module provides a Se ...
- CentOS/Linux开放某些端口
CentOS/Linux开放某些端口 CentOS/Linux 装载系统的时候只开启了少数端口如22,80(有些连80都没有开放)等. 结果再装完Nginx+PHP+MySQL 后不能访问网站. 当然 ...
- docker时间和本地时间不一致的问题
前言: 在本地执行date 和登录docker后的date显示的时间不一致,差一天多,不是8个小时 参考:戳这儿 先重启,查看后发现差8个小时 用里面cp localtime 再重启还是差8个小时 试 ...
- DNS解析类型的区别
1.A记录:WEB服务器的IP指向 A (Address) 记录是用来指定主机名(或域名)对应的IP地址记录. 就是说:通过A记录,大家可以设置自己的不同域名转到不同的IP上去!如: www.dns. ...
- 解决tomcat端口被占用：Port 8005 required by Tomcat v7.0 Server at localhost is already in use
问题提示8005端口被占用 首先:在cmd下,输入 netstat -ano|findstr 8005 (什么端口号被占用就输入什么端口号),回车 再输入 taskkill /pid 20 ...