(一)主域相同子域不同之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 协议子域名主域名端口号请求资源地址 当协议.子域名.主域名.端口号中任意一个不相同时 ...
随机推荐
- go实现json数组嵌套
go实现json数组嵌套 引用包 "encoding/json" 定义以下结构体 type person struct { Name string `json:"name ...
- Linux Centos7.x下安装部署Jira和confluence以及破解方法详述
简述 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. Confluence是一个专业的企业知识管 ...
- DMA设计
目录 DMA设计 DMA框架 手册请看英文手册 芯片特性 请求来源 协议简述 基本时序 模式 协议 数据大小的描述 具体完整的实例时序 代码设计 驱动程序 测试程序 测试 参考链接 title: DM ...
- jQuery使用（十）：jQuery实例方法之位置、坐标、图形（BOM）
offset() position() scrollTop().scrollLeft width().height() innerWidth().outerWidth().innerHeight(). ...
- LFYZ-OJ ID: 1015 统计数字（NOIP2007）
分析 本体思路很简单:读入数据,排序.统计.输出.难点在于数据量较大,选择何种排序方法就极为重要,否则很容易发生内存或时间超限.可以考虑以下几种思路: 桶排序 桶排序是可以想到的最简单方法,可在O(n ...
- Scrapy框架-----爬虫
说明:文章是本人读了崔庆才的Python3---网络爬虫开发实战,做的简单整理,希望能帮助正在学习的小伙伴~~ 1. 准备工作: 安装Scrapy框架.MongoDB和PyMongo库,如果没有安装, ...
- Centos7 设置vim 显示文本不同颜色
Centos7 设置vim 显示文本不同颜色 本人在查找设置 centos7 vim 文本显示颜色时, 学习了作者: luffy5459 (博客连接:https://blog.csdn.net/fei ...
- [mysql]错误解决之"Failed to start MySQL Server"
最近又开始倒腾mysql了,遇到了一个以前没有见过的问题. 问题如下: 百度了好久,发现写的文章都千篇一律,解决办法也都几乎是一样的,然而在我这里一点儿用都没有. 所以FQ看了看外面的世界,终于找到了 ...
- 用vue 写h5页面-摇一摇
vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...
- 解决nginx和php使用ckfinder无法上传大文件的问题
现象描述:cms内容发布系统上传不了大文件,当上传超过32M文件时就上传不了 提示:无效的文件. 文件尺寸太大. 分析文件上传过程:browser --> nginx --> php 需要 ...