十分钟搞懂CORS：跨域问题的救星（零基础友好版）

新手在调用API时最常遇到的拦路虎，除了401/403错误，大概就是这个红色报错了：

Access to fetch at 'http://api.example.com' from origin 'http://my-site.com' 
has been blocked by CORS policy

别慌！花5分钟看完这篇，你就能从CORS小白变身解决小能手！

一、先讲个小区门禁的故事 ️

假设你住的小区（http://my-site.com）有个严格规定：

同源策略：只允许本小区住户（相同协议+域名+端口）自由进出，外卖快递需要登记

有一天你想去隔壁小区（http://api.example.com）拿快递，这时候会出现两种场景：

场景1：简单请求（快递柜取件）

• 你直接走到对方小区门口
• 保安检查你的通行证（请求头带Origin）
• ✅ 对方小区竖起允许通行的牌子（响应头含Access-Control-Allow-Origin: *）

GET /data HTTP/1.1
Origin: http://my-site.com

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *

场景2：特殊请求（需要进楼取件）

• 先打电话问：“我要开卡车进去搬家具行吗？”（发送OPTIONS预检请求）
• 对方小区回复允许的方式（响应头说明允许的Method/Headers）

OPTIONS /data HTTP/1.1
Origin: http://my-site.com
Access-Control-Request-Method: PUT

HTTP/1.1 204 OK
Access-Control-Allow-Origin: http://my-site.com
Access-Control-Allow-Methods: PUT, DELETE

• 收到许可后正式发出请求

二、三分钟上手CORS配置 ⚙️

以Node.js为例，只需要5行代码：

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors({
  origin: 'http://trusted-site.com', // 指定允许的源
  methods: ['GET', 'POST']          // 允许的方法
}));

常见配置项表格：

响应头	作用示例	安全提示
Access-Control-Allow-Origin	* 或 https://example.com	生产环境慎用通配符*
Access-Control-Allow-Methods	GET, POST, PUT	按需开放，不要用ALL
Access-Control-Allow-Headers	Content-Type, Authorization	白名单机制更安全
Access-Control-Max-Age	86400（1天缓存）	减少预检请求次数

三、常见问题急救包

Q1：为什么本地开发会跨域？

因为你的前端跑在http://localhost:3000，后端在http://localhost:8080 → 端口不同也算跨域！

✅ 解决方案：

1. 配置代理（create-react-app等脚手架支持）
2. 后端临时设置Access-Control-Allow-Origin: *

Q2：明明配置了CORS，还是报错？

检查顺序：

1. 响应头是否真的被发送（浏览器Network面板确认）
2. 是否涉及Cookie需要设置Access-Control-Allow-Credentials: true
3. 非简单请求是否处理了OPTIONS预检

Q3：生产环境怎么安全配置？

黄金三原则：

1. 严格指定origin白名单
2. 禁用Access-Control-Allow-Origin: *
3. 启用HTTPS + 设置Strict-Transport-Security

四、知识图谱总结 ️

是

是

否

通过

拒绝

浏览器发起请求

是否跨域?

添加Origin头

简单请求?

直接发送

先发OPTIONS预检

服务器返回CORS头

正式请求

检查响应头

返回数据

控制台报错

记住这个口诀：

跨域请求不用慌，CORS头来帮忙
简单请求直接过，特殊请求先问岗
配置切记安全性，生产别用通配项

现在你已经掌握了CORS的核心要点！下次再遇到跨域问题，就像小区保安一样从容检查"通行证"吧~