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

最新推荐文章于 2025-05-18 19:19:11 发布

KenkoTech

最新推荐文章于 2025-05-18 19:19:11 发布

阅读量1.1k

点赞数 26

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/KenkoTech/article/details/144962587

跨域

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

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

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

比如下面这四个里，只有第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.	    
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.	    
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