25.1 同源策略
25.1.1 同源
// 非同源:协议不同
http://www.baidu.com
https://www.baidu.com
// 同源:协议、域名、端口号都相同
http://www.baidu.com
http://www.baidu.com?query=1
25.1.2 同源策略
25.1.3 同源策略的表现
- DOM层面
同源策略限制了来自不同源的JavaScript脚本对当前DOM对象读和写的操作。
- 数据层面
同源策略限制了不同源的站点读取当前站点的Cookie、IndexedDB、localStorage等数据。
- 网络层面
同源策略限制了通过XMHttpRequest等方式将站点的数据发送给不同源的站点。
25.2 跨域分类
25.2.1 DOM层面和数据层面分类
- 片段标识符
// 父页面parentHtml.html
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
</head>
<body>
我是父页面
<button id='btn'>父传给子</button>
<iframe src="./childHtml.html" id="childHtmlId"></iframe>
</body>
<script>
window.onhashchange = function() {
console.log(decodeURIComponent(window.location.hash));
};
document.getElementById('btn').addEventListener('click', () => {
const iframeDom = document.getElementById('childHtmlId');
iframeDom.src += '#父传给子';
});
</script>
</html>
// 子页面childHtml.html
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
</head>
<body>
我是子页面
<button id='btn'>子传给父</button>
</body>
<script>
window.onhashchange = function() {
console.log(decodeURIComponent(window.location.hash));
};
document.getElementById('btn').addEventListener('click', () => {
parent.location.href += '#子传给父';
});
</script>
</html>
- window.name
- document.domain
- postMessage（强烈推荐）
// 父页面
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
</head>
<body>
我是父页面
<button id='btn'>父传给子</button>
<iframe src="http://127.0.0.1:5500/024/childHtml.html" id="childHtmlId"></iframe>
</body>
<script>
window.addEventListener('message', function(event) {
console.log('父页面接收到信息', event.data);
});
document.getElementById('btn').addEventListener('click', () => {
const iframeDom = document.getElementById('childHtmlId');
iframeDom.contentWindow.postMessage('我是执鸢者1', 'http://127.0.0.1:5500/024/childHtml1.html');
});
</script>
</html>
// 子页面
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
</head>
<body>
我是子页面
<button id='btn'>子传给父</button>
</body>
<script>
window.addEventListener('message', function(event) {
console.log('子页面接收到信息', event.data);
});
document.getElementById('btn').addEventListener('click', () => {
parent.postMessage('我是执鸢者2', 'http://127.0.0.1:5500/024/parentHtml1.html');
});
</script>
</html>
25.2.2 网络层面
- 通过代理实现
- JSONP的方式（具体实现见后续百题斩）
（1）src属性能够访问任何URL资源，并不会受到同源策略的限制；
（2）如果访问的资源包含JavaScript代码，其会在下载后自动执行。
- CORS方式（具体实现见后续百题斩）
(1)html页面内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test CORS</title>
</head>
<body>
CORS
<script src="https://code.bdstatic.com/npm/axios@0.20.0/dist/axios.min.js"></script>
<script>
axios('http://127.0.0.1:8010', {
method: 'get'
}).then(console.log)
</script>
</body>
</html>
(2)服务器端代码
const express = require('express');
const app = express();
app.get('/', (req, res) => {
console.log('get请求收到了！！！');
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8009');
res.send('get请求已经被处理');
})
app.listen(8010, () => {
console.log('8010 is listening')
});
1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到
2.关注公众号执鸢者，与号主一起斩杀前端百题
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！