Angular由一个bug说起之十三:Cross Origin

跨域

想要了解跨域,首要要了解源

什么是源,源等于协议加域名加端口号

只有这三个都相同,才是同源,反之则是非同源。

比如下面这四个里,只有第4个是同源

而浏览器给服务器发送请求时,他们的源一样,就是同源请求,反之就是非同源请求,非同源请求又称为跨域。

当你是跨域时,浏览器为了确保资源安全,会对跨域的访问资源做出一些限制,也就是浏览器的同源策略。

这是W3C上对同源策略的说明:https://www.w3.org/Security/wiki/Same_Origin_Policy

浏览器会对跨域做出哪些限制?

例如:源a和源b,它们是非同源的,则浏览器会有如下限制:

1. DOM访问限制:源a的脚本不能读取和操作源b的DOM。

页面1

1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<head>
4.	    <meta charset="UTF-8">
5.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.	    <title>Document</title>
7.	</head>
8.	<body>
9.	    <h1>我是页面1</h1>
10.	    <button onclick="showDOM()">获取页面2的DOM</button>
11.	    <br>
12.	    <iframe id="framePage" src="./demo.html"></iframe>
13.	    <!-- <iframe id="framePage" src="https://www.baidu.com"></iframe> -->
14.	
15.	    <script type="text/javascript" >
16.	        function showDOM(){
17.	            const framePage = document.getElementById('framePage')
18.	            console.log(framePage.contentWindow.document.body) //同源的可以获取,非同源的无法获取
19.	        }
20.	    </script>
21.	    </body>
22.	</html>

页面2

1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<head>
4.	    <meta charset="UTF-8">
5.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.	    <title>Document</title>
7.	</head>
8.	<body>
9.	    <h2>我是页面2</h2>
10.	</body>
11.	</html>

页面是这样的

点击获取

换一个不同源的页面

1.	<body>
2.	    <h1>我是页面1</h1>
3.	    <button onclick="showDOM()">获取页面2的DOM</button>
4.	    <br>
5.	    <!-- <iframe id="framePage" src="./demo.html"></iframe> -->
6.	    <iframe id="framePage" src="https://www.bilibili.com"></iframe>
7.	
8.	    <script type="text/javascript">
9.	        function showDOM() {
10.	            const framePage = document.getElementById('framePage')
11.	            console.log(framePage.contentWindow.document.body) //同源的可以获取,非同源的无法获取
12.	        }
13.	    </script>
14.	</body>

获取DOM

获取不到

2. 第二个限制,源a不能访问源b的cookie

3.	<!DOCTYPE html>
4.	<html lang="en">
5.	
6.	<head>
7.	    <meta charset="UTF-8">
8.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9.	    <title>Document</title>
10.	</head>
11.	
12.	<body>
13.	    <h1>我是页面1</h1>
14.	    <button 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值