CORS（跨原产资源共享）靶场1

什么是"域"？

在互联网世界里，"域"通常指的就是域名（Domain Name）。

你可以把它理解为一个网站的"名字"或"门牌号"。因为互联网上的每台服务器都有一个由数字组成的IP地址（如 203.0.113.19），这串数字很难记忆。所以，人们发明了域名，比如 www.example.com，让我们能通过一个好记的名字来访问网站。

一个完整的域名是分层的，从右到左级别依次降低。以 shop.example.com 为例：

顶级域 (TLD) ：.com，代表网站的类型（如商业机构）。
二级域 (SLD) ：example，这是网站所有者的核心名称。
子域 (Subdomain) ：shop，由所有者自行定义，用于指向特定服务（如商城）。

什么是"跨域"？

"跨域"是前端开发中一个非常核心的概念，它源于浏览器的一项基本安全机制------同源策略（Same-Origin Policy, SOP）。

同源策略

为了保障用户安全，浏览器规定：一个网页中的脚本（如JavaScript）只能访问与当前页面"同源"的资源。

"同源"的定义

只有当两个页面的协议、域名、端口这三者完全一致时，才被认为是"同源"。

对比项	协议	域名	端口
同源要求	必须相同	必须相同	必须相同

只要有任何一项不同，就会被浏览器判定为"跨域"，并阻止脚本读取对方的数据（如AJAX请求的响应、Cookie等）。

跨域示例

假设当前页面是 http://localhost:8080：

访问 http://localhost:8080/api：不跨域（三者完全相同）。
访问 https://localhost:8080/api：跨域（协议不同，http vs https）。
访问 http://api.example.com/api：跨域（域名不同）。
访问 http://localhost:3000/api：跨域（端口不同）。

为什么需要跨域限制？

可以把它想象成一道"防火墙"。如果没有同源策略，当你登录网银后，一个恶意网站就能通过脚本悄悄读取你的网银页面信息，盗取你的账户数据，造成严重的安全风险。

什么是"跨域资源共享"？

您提到的"跨原产资源共享"，在专业术语中被称为跨域资源共享（Cross-Origin Resource Sharing, CORS）。它是目前解决跨域问题最主流、最标准的方案。

CORS 是什么？

CORS 是一套浏览器和服务器共同遵守的"交通规则"。它允许服务器明确告诉浏览器："我信任并允许来自某个特定'域'的网页访问我的资源。"

CORS 是如何工作的？

整个过程由浏览器自动完成，对开发者来说，关键在于服务器的配置。

前端发起请求 ：当浏览器检测到脚本正在发起一个跨域请求时，它会自动在请求头中添加一个 Origin 字段，标明请求来自哪个源（例如 http://localhost:8080）。
服务器做出响应 ：服务器收到请求后，会检查 Origin 字段。如果允许该来源访问，它会在响应头中添加一个 Access-Control-Allow-Origin 字段，值就是被允许的源（例如 http://localhost:8080）。
浏览器放行 ：浏览器收到响应后，会检查响应头中是否包含允许自己源的 Access-Control-Allow-Origin 字段。如果匹配成功，就将数据返回给前端脚本；否则，就会拦截响应并报错。

两种类型的CORS请求

浏览器会根据请求的复杂程度，将其分为两类：

简单请求 ：满足特定条件的请求（如使用 GET 或 POST 方法，且请求头是浏览器自动添加的）。浏览器会直接发送请求，等待服务器的"放行"指令。
非简单请求 ：不满足简单请求条件的请求（如使用 PUT 或 DELETE 方法，或包含自定义请求头）。在发送正式请求前，浏览器会先发送一个 OPTIONS 方法的"预检请求"（Preflight Request），询问服务器是否允许这次跨域操作。只有预检通过后，才会发送真正的请求。

为什么需要跨域请求？

这主要源于现代网站开发的两种主流模式：

1. 前后端分离开发

这是最主要的原因。现在，前端（负责页面展示）和后端（负责数据处理）通常是两个独立的团队，甚至部署在完全不同的服务器上。

场景： 前端页面部署在 www.example.com，而后端的API接口部署在 api.example.com。
问题： 如果不允许跨域，前端页面就无法从自己的后端获取任何数据，网站就变成了一个没有内容的空壳。
作用： 跨域请求（通过CORS等技术）让 www.example.com 能够合法、安全地从 api.example.com 获取用户信息、商品列表等数据。

2. 集成第三方服务

现代网站很少"单打独斗"，通常会集成各种强大的第三方服务来丰富功能。

场景：
- 在你的博客里嵌入一个 高德地图 来显示位置。
- 在电商网站使用 支付宝或微信支付。
- 使用 GitHub或Google账号 进行快捷登录。
问题： 这些服务（地图、支付、登录）的代码和数据都存储在第三方的服务器上（如 map.amap.com, pay.alipay.com）。
作用： 跨域请求让你的网页能够调用这些外部服务的接口，实现地图展示、支付跳转、身份验证等功能，极大地丰富了用户体验。

既然有用，为什么浏览器还要阻止？

这正是浏览器的聪明之处，它通过 "默认阻止，按需放行" 的策略来保护你。

阻止是为了安全： 防止恶意网站在后台悄悄获取你的隐私数据。例如，防止一个钓鱼网站悄悄读取你已经登录的网银页面的信息。
放行是为了功能： 当服务器明确配置了CORS规则，告诉浏览器"我信任 www.example.com 这个来源"时，浏览器就会放行。这保证了合法的业务需求能够被满足。

说人话

当一个网站需要调用另一个网站的服务并传递用户数据时，浏览器会发起一个"跨域资源请求"来获取或发送这些数据。就是跨域资源请求

那么问题来了，

怎么判断我的目标使用了跨域资源请求呢？

第一步：打开开发者工具

在 Chrome、Edge 或 Firefox 浏览器中，按 F12 或 Ctrl + Shift + I (Windows/Linux) / Cmd + Opt + I (Mac) 打开开发者工具。
切换到 Network（网络） 面板。
刷新页面或触发你想要分析的操作，让请求显示在列表中。

第二步：识别跨域请求的三大特征

在 Network 面板中，你可以通过以下三个特征来迅速锁定并判断跨域请求：

特征 1：看"预检"请求 (OPTIONS)

这是最明显的特征。如果你在列表中看到一个 OPTIONS 方法的请求，且紧随其后就是你实际的业务请求（如 POST 或 GET），那么这绝对是一个复杂的跨域请求。

现象：列表中多了一个状态为 200 或 204 的 OPTIONS 请求。
含义：浏览器在正式发送数据前，先"试探"了一下服务器，询问是否允许跨域。

特征 2：看请求头 (Request Headers)

点击具体的请求，查看 Request Headers（请求标头），寻找以下字段：

Origin ：这是跨域请求的"身份证"。
- 如果请求头里包含 Origin: http://localhost:3000（假设这是你当前网页的地址），说明浏览器明确告诉服务器："我是从这个地址来的，请检查是否允许我访问"。
- 同源请求通常不会带这个头，或者带了也不重要。

特征 3：看响应头 (Response Headers)

这是判断跨域是否成功 的关键。点击请求，查看 Response Headers（响应标头），寻找以下字段：

Access-Control-Allow-Origin ：这是服务器的"通行证"。
- 如果看到了这个字段（例如值为 * 或 http://localhost:3000），说明服务器允许跨域。
- 如果没看到这个字段 ，但请求状态是 200，浏览器依然会拦截数据，并在控制台（Console）报错（如 Blocked by CORS policy）。

然后查看日志，直接把这个获取到的东西输入进去

恭喜你解决了这第一个学徒实验室