1. 什么是跨域？

跨域（Cross-Origin）指的是浏览器阻止网页向不同域（不同协议、端口、域名）的服务器发起请求，这是 Same-Origin Policy（同源策略） 造成的。

📌 什么是“同源”？ 如果两个 URL 具有相同的：

• 协议（protocol）
• 域名（host）
• 端口（port）

它们就属于 同源（Same-Origin）。

示例：

<http://example.com:80>    ✅ 同源
<http://example.com:8080>  ❌ 不同端口
<https://example.com>      ❌ 不同协议
<http://api.example.com>   ❌ 不同子域名

如果请求的目标域和当前网页的域不一致，就会触发跨域问题。

2. 跨域问题的触发场景

你在 localhost:3000（React/Next.js 开发环境）发请求到 api.example.com，浏览器会拦截：

fetch("<https://api.example.com/data>")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("请求失败", err));

🔴 浏览器控制台报错：

Access to fetch at '<https://api.example.com/data>' from origin '<http://localhost:3000>' has been blocked by CORS policy

📌 为什么？

• 你的前端网页（localhost:3000）和后端 API（api.example.com）不同源。
• 浏览器的同源策略阻止了这个请求。