CORS是浏览器限制跨源请求的安全机制，需服务器返回Access-Control-Allow-Origin等响应头授权；常见报错提示请求被拦截，实为响应头缺失；配置时需注意Credentials与*互斥、预检请求处理等细节。
CORS（跨域资源共享）是浏览器的一种安全机制，用来限制网页脚本向不同源（协议、域名、端口任一不同）的服务器发起请求。它不是JavaScript本身的特性，而是浏览器对JS发起的HTTP请求施加的限制。简单说：你的JS代码想用fetch或XMLHttpRequest访问另一个域名的API，浏览器会先检查对方服务器是否“同意”，这个“同意”就是靠CORS响应头控制的。
常见CORS报错长什么样？
典型提示如：
“Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy…”
这说明请求发出去了，但浏览器在收到响应后发现缺少合法的CORS头，直接拦截了响应内容——注意：服务端其实可能已成功处理请求，只是前端拿不到结果。
服务器必须返回哪些关键响应头？
最基础的配置只需两个响应头：
-
Access-Control-Allow-Origin：指定允许哪个源访问，比如http://localhost:3000，或用*（仅限无认证请求） -
Access-Control-Allow-Methods：列出允许的HTTP方法，如GET, POST, PUT, DELETE
如果请求带Cookie或Authorization头，还需额外设置：
-
Access-Control-Allow-Credentials: true（此时Allow-Origin不能为*，必须写具体域名） -
Access-Control-Allow-Headers：如Content-Type, Authorization
不同后端怎么加CORS头？
Node.js（Express）示例：
立即学习“Java免费学习笔记（深入）”；
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
Nginx配置片段：
location /api/ {
add_header 'Access-Control-Allow-Origin' 'http://localhost:3000';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Access-Control-Allow-Origin' 'http://localhost:3000';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
}
Python（Flask）简写方式：
from flask_cors import CORS CORS(app, origins=['http://localhost:3000'], supports_credentials=True)
开发时的小技巧
- 本地开发可临时用浏览器插件（如CORS Unblocked）绕过检查——仅用于调试，别依赖它
- 避免在生产环境用
*配Allow-Origin+Allow-Credentials，会报错 - 预检请求（OPTIONS）是浏览器自动发的，服务器必须正确响应，否则后续请求根本不会发出
- 后端日志里看不到CORS拦截，因为拦截发生在浏览器层，服务端无感知
基本上就这些。CORS本身不复杂，但细节容易忽略，重点盯住那几个响应头是否匹配你的前端请求方式。
