🚀 前言

阅读完本文，你将理解：

  • CORS（跨域资源共享）到底是什么
  • 浏览器为什么会突然拦截你的 API 请求
  • 常见 CORS 报错背后的真实含义（其实并不可怕）

✅ 什么是 CORS（Cross-Origin Resource Sharing）

CORS 的本质是：

浏览器在问：
“这个网页，可以访问另一个‘地址’的资源吗？”

如果没有明确允许，浏览器就会主动阻止。

🌐 先理解什么是「Origin（源）」

一个 Origin（源） 由三部分组成：

  • 协议（http / https）
  • 域名（example.com）
  • 端口（:80 / :443）

只要其中 任意一项不同，就属于 跨域（Cross-Origin）。

示例：

  • https://example.com
  • https://api.example.com ❌ 域名不同
  • http://example.com ❌ 协议不同

🔐 CORS 存在的真正目的

只有一个核心目的：

✅ 防止恶意网站在你不知情的情况下读取敏感信息

🏠 举个生活化的例子：家里的邮箱

  • 家人（同源） → 直接投递
  • 陌生人（跨域） → 先确认身份

CORS 就是浏览器自动做的「身份确认」。

⚠️ 如果没有 CORS 会怎样？

如果浏览器完全不检查跨域：

  • 恶意网站可以读取：
    • 银行信息
    • 登录状态的 Cookie
    • 个人隐私数据

👉 整个 Web 将变成不设防的环境。

所以：CORS 不是限制你，而是在保护你。

💥 常见出现 CORS 的场景

新手最常遇到的情况：

  • 前端（HTML / JavaScript）调用 API
  • localhost:3000 请求线上接口
  • Cloudflare Pages / Vercel / GitHub Pages
  • 控制台出现红色报错：
Access to fetch at '<https://api.example.com>'
from origin '<https://example.com>' has been blocked by CORS policy

😱 其实它只是说：
“这个请求没有被允许，我帮你挡住了。”

💡 开发者常见误解

💡 1️⃣ 不是服务器在拒绝你

真实情况是：

👉 拦截请求的是浏览器本身

  • Chrome / Edge / Firefox 在执行安全策略
  • 同一个 API：
    • 服务器对服务器 ✅
    • 浏览器发起 ❌

💡 2️⃣ 为什么 Postman / curl 能成功？

因为：

✅ CORS 是浏览器专属的安全规则

后端测试工具不受 CORS 限制。

💡 3️⃣ CORS 并非「全禁止」

服务器可以精确配置：

  • 允许哪些网站
  • 允许哪些 HTTP 方法
  • 允许哪些请求头

这些规则都通过 HTTP Header 设置。

📚 推荐参考资料

🎯 总结

  • ✅ CORS 是浏览器的安全防线
  • ✅ 跨域请求都会被自动检查
  • ✅ 出现报错 ≠ 程序失败
  • ✅ 红色错误信息 = 正常的安全提示
  • ✅ 新手会卡住是非常正常的