Cors 简单介绍
本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
什么是 CORS
CORS（跨源资源共享） 是一种安全机制，用于控制不同源（域名、协议、端口）之间的资源访问。
银行取钱的比喻
想象一下 CORS 就像银行的安全规定：
同源策略（没有 CORS 的情况）
- 您去自己的开户行取钱 ✅
- 银行认识您，直接办理
- 您去别的银行取钱 ❌
- 银行说：“我不认识您，不能给您钱”
这就是浏览器的同源策略：默认只允许访问同域名下的资源。
CORS 的作用
CORS 就像是银行之间的合作协议：
-
您的银行 （前端网站）对对方银行 （后端 API）说：
“我允许我的客户来您这里办理业务” -
对方银行 （后端 API）回应：
“好的，我已经把您加入我的合作银行名单了”
CORS 的实际工作流程
场景：前端网站调用后端 API
没有 CORS 时：
前端：https://shop.com
后端：https://api.shop.com
浏览器：❌ 阻止访问！域名不同有 CORS 时：
前端：我要调用 https://api.shop.com 的用户数据
浏览器：等等，我先问问对方允不允许
↓ 发送"预检请求"（OPTIONS）
后端：我允许！这是我的许可证明：
- 允许来源：https://shop.com
- 允许方法：GET, POST
- 允许携带凭证（cookies）
浏览器：✅ 好的，现在可以发送真实请求了CORS 头信息的通俗解释
Allow-Origin
作用： 准入名单
- *：“所有人都可以进来”
- https://shop.com：“只允许 shop.com 进来”
Allow-Methods
作用： 允许的操作
- GET, POST：“你只能查看和添加”
- GET, POST, PUT, DELETE：“你可以查看、添加、修改、删除”
Allow-Headers
作用： 允许携带的证件类型
- Authorization, Content-Type：“你可以带身份证和申请表”
- *：“什么证件都可以带”
Allow-Credentials
作用： 是否信任你
- true：“我相信你，可以办理敏感业务”
- false：“我只能给你提供公开信息”
Expose-Headers
作用： 给你看的内部信息
- X-Token, X-User-Id：“你可以看到我们的内部编号”
- 其他内部信息你看不到
两种请求类型
简单请求（像去便利店）
条件： 只是看看（GET）或简单登记（POST）
- 直接进去，不用提前打招呼
- 例子：获取公开商品信息
预检请求（像去银行办业务）
条件： 复杂操作（DELETE、PUT）或带特殊证件
- 先问：“我能办这个业务吗？"（OPTIONS 请求）
- 得到许可后再办理
- 例子：删除用户、修改密码
代码中的两种模式
完全开放（开发环境）
// 像商场开业促销
"所有人都欢迎！随便进来看看！"- 适合测试阶段
- 任何网站都能访问你的 API
白名单模式（生产环境）
// 像高级会所
"只有会员才能进入，这是会员名单..."- 只允许信任的网站访问
- 提高安全性
实际例子
购物网站
前端：https://www.taobao.com（淘宝网站）
后端：https://api.taobao.com（淘宝API）
CORS 配置：只允许 www.taobao.com 访问恶意网站攻击
恶意网站：https://hacker.com
想偷偷调用：https://api.taobao.com（获取用户数据）
结果：❌ 被 CORS 阻止！因为不在白名单中为什么需要 CORS
保护用户数据
没有 CORS 的话：
- 恶意网站可以在你不知情时，用你的登录状态调用银行 API
- 可能盗取你的个人信息、进行转账等操作
合理的跨域协作
有 CORS 的话：
- 你的前端网站可以和第三方服务安全合作
- 比如：网站调用地图 API、支付 API 等
总结
CORS 就是一套"访客管理制度”：
- 门卫（浏览器）严格执行规则
- 访客（前端网站）需要得到主人（后端 API）的许可
- 许可证明（CORS 头信息）告诉门卫哪些访客可以进，能做什么
核心价值： 在允许合理合作的同时，防止恶意访问，保护用户安全。