点此查看 所有教程、项目、源码导航
文章目录
- [1. 什么是同源](#1. 什么是同源)
-
- [1.1 同源三要素](#1.1 同源三要素)
- [1.2 容易踩坑的例子](#1.2 容易踩坑的例子)
- [2. 同源策略](#2. 同源策略)
-
- [2.1 同源策略概念](#2.1 同源策略概念)
- [2.2 浏览器为什么要有同源策略？](#2.2 浏览器为什么要有同源策略？)
- [3. 什么是跨域](#3. 什么是跨域)
- [4. 怎么解决跨域（前端视角）](#4. 怎么解决跨域（前端视角）)
-
- [4.1 CORS（跨域资源共享）](#4.1 CORS（跨域资源共享）)
- [4.2 其他方案（简单了解）](#4.2 其他方案（简单了解）)
- [5. 我们之前遇到的跨域场景复盘](#5. 我们之前遇到的跨域场景复盘)
- [6. 小结](#6. 小结)
前面我们已经学会使用 XHR 发送网络请求，很多同学在测试的时候，会遇到控制台报跨域错误。这一篇我们就搞懂：什么是同源、什么是跨域、为什么浏览器要限制跨域。
1. 什么是同源
同源，要求两个地址 协议、域名、端口 这三部分全部一样，才叫同源。
只要其中任意一个不一样，就是不同源。
1.1 同源三要素
- 协议：http、https
- 域名：localhost、127.0.0.1、jsonplaceholder.typicode.com
- 端口：5500、8080、3000
举例：
页面地址：
http://127.0.0.1:5500/index.html接口地址：
http://127.0.0.1:5500/api/list✅ 协议、域名、端口全都相同 → 同源
页面地址：http://127.0.0.1:5500/index.html
接口地址：https://jsonplaceholder.typicode.com/posts
❌ 域名不一样 → 不同源，触发跨域
1.2 容易踩坑的例子
- http 和 https：不同协议 → 跨域
- 127.0.0.1 和 localhost：域名不一样 → 跨域
- 端口 5500 和 8080：端口不同 → 跨域
2. 同源策略
2.1 同源策略概念
同源策略是浏览器的安全规则 ，是浏览器自带的保护机制，不是 JS 语法的限制。
规则：
同源策略允许网页去请求同源的接口；默认不允许网页直接访问不同源的接口。
2.2 浏览器为什么要有同源策略？
核心目的：保护用户安全，防止恶意网站窃取数据。
举个例子：
你登录了银行网站，浏览器里面保存了你的登录状态。如果没有同源限制，一个恶意网页就可以偷偷发起请求，去银行接口读取你的余额、转账，风险极大。
同源策略就是用来隔离不同网站，防止恶意网站随便读取别的网站数据。
重点：同源策略只存在浏览器里面。
后端和后端之间、后端去请求别的接口，不存在跨域限制。
3. 什么是跨域
跨域 = 不同源。
当页面地址和接口地址协议 / 域名 / 端口任意一项不一致，浏览器的同源策略就会拦截这次请求，控制台报跨域错误。
⚠️ 重要区分：
跨域不是请求发不出去，很多时候请求已经到达后端，后端也收到并且处理了，只是浏览器拿到返回结果之后，不给前端 JS 读取，直接拦截响应。
4. 怎么解决跨域（前端视角）
跨域是浏览器的安全限制，单纯靠前端 JS 代码不能解决跨域 。
最主流、标准方案：后端开启 CORS（跨域资源共享）。
所以这篇文章，前端人员了解就行，一般都是后端开发人员实现跨域。
4.1 CORS（跨域资源共享）
后端在响应头里面添加允许跨域的配置，告诉浏览器：这个接口允许来自别的源的页面访问。
浏览器看到这个响应头，就会放行，不再拦截。
像我们之前用的 jsonplaceholder 测试接口，就是后端配置好了 CORS，所以我们 打开页面可以正常请求。
补充：SpringBoot 后端可以简单配置开启 CORS，这个是后端开发的工作，前端不用写额外代码。
4.2 其他方案（简单了解）
- 代理服务器：开发环境常用，vite、webpack 代理，属于开发工具层面方案
- JSONP：只支持 GET 请求，不支持 POST，老旧方案，现在基本不用
一句话总结给学生：跨域主要是后端通过 CORS 解决，前端不用写特殊请求代码。
5. 我们之前遇到的跨域场景复盘
场景 1：直接双击打开 html，地址是 file:// 协议
去请求 https 的接口，协议不一样，跨域。
场景 2：本地页面 http://127.0.0.1:5500 请求网上的测试接口
域名不一样，本来就是跨域，但是接口后端开了 CORS，所以可以正常拿到数据。
场景 3：自己写的 SpringBoot 接口，没有配置 CORS
前端请求直接跨域报错，需要后端加上跨域配置。
6. 小结
- 同源看三样：协议、域名、端口，全部相同才是同源；
- 同源策略是浏览器的安全机制，用来保护用户数据；
- 三要素任意一个不同，就是跨域；跨域是浏览器拦截响应，不是请求发不出去；
- 跨域标准解决方案：后端配置 CORS；前端代码不需要改动；
- 后端之间通信不受同源策略限制。