cors配置关键在后端响应头，前端无法单独解决。必须设置access-control-allow-origin、access-control-allow-methods、access-control-allow-headers及access-control-allow-credentials（若需cookie），且nginx需加always参数、分开处理options，node.js常用cors中间件，.net推荐策略注册。
CORS 配置不是前端写几行 JavaScript 就能解决的，关键在后端响应头。浏览器强制执行同源策略，只有服务端明确声明允许，跨域请求才能成功。
必须设置的核心响应头
后端需在 HTTP 响应中返回以下字段，缺一不可：
-
Access-Control-Allow-Origin：指定允许访问的源，如
https://your-frontend.com；开发时可设为*，但若需传 Cookie 就不能用通配符 -
Access-Control-Allow-Methods：列出允许的方法，例如
GET, POST, PUT, DELETE, OPTIONS -
Access-Control-Allow-Headers：声明前端可能携带的请求头，常见如
Content-Type, Authorization, X-Requested-With -
Access-Control-Allow-Credentials：若前端 fetch 设置了
credentials: 'include'（比如要传 Cookie），此项必须为true，且Access-Control-Allow-Origin不能是*
不同后端的典型配置方式
Node.js（Express）常用 cors 中间件：
const express = require('express');
const cors = require('cors');
const app = express();
const corsOptions = {
origin: 'http://localhost:5173', // 替换为你的前端地址
credentials: true,
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization']
};
app.use(cors(corsOptions));
Nginx 可直接在 location 块中添加：
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, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 86400;
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, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
return 204;
}
}
.NET 6+ 推荐用策略注册：
builder.Services.AddCors(options => {
options.AddPolicy("FrontendPolicy", policy =>
policy.WithOrigins("https://your-frontend.com")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
app.UseCors("FrontendPolicy");
前端配合要点
前端代码本身不“配置 CORS”，但要注意匹配后端规则：
- 如果后端开了
credentials: true，fetch 必须写credentials: 'include' - 带自定义 header（如
Authorization）或用application/json发送数据，会触发预检（OPTIONS 请求），后端必须能响应 OPTIONS - 简单请求（如 GET +
Content-Type: text/plain）可能不触发预检；复杂请求一定触发，别漏掉 OPTIONS 处理
调试常见卡点
遇到跨域失败，先看浏览器开发者工具 Network 标签页：
- 检查响应头里有没有
Access-Control-Allow-Origin，值是否匹配当前页面地址 - 预检失败？确认 OPTIONS 请求返回状态码是 200 或 204，且响应头完整
- 提示 “Credentials flag is true…”？说明
Access-Control-Allow-Origin用了*，但又开了凭据，二者冲突 - 本地开发常用
http://localhost:5173等地址，务必在后端白名单里写全协议和端口
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
