正确处理Nginx跨域需在server或location块中配置CORS头并显式拦截OPTIONS预检请求：add_header必须加always参数，禁用if+proxy_pass混用，生产环境应使用map动态白名单替代通配符Origin。
直接在 Virtual Host（即 Nginx 的 server 块）里加响应头就能让前端跨域调用后端接口，关键是把 CORS 头写对位置、配好逻辑，尤其注意 OPTIONS 预检请求的处理。
在 server 块中统一配置跨域头
适用于整个站点或特定路径的跨域需求。把 add_header 指令放在 server 或 location 块内，确保响应中包含必要头信息：
-
Access-Control-Allow-Origin：开发阶段可设为
*；生产环境需指定具体域名（如https://your-frontend.com） -
Access-Control-Allow-Methods：至少包含
GET, POST, OPTIONS，有修改操作时补上PUT, DELETE -
Access-Control-Allow-Headers：常见值如
Content-Type, Authorization, X-Requested-With, Accept -
Access-Control-Allow-Credentials：需要带 Cookie 登录态时设为
true，此时Access-Control-Allow-Origin不能用*
必须拦截并响应 OPTIONS 预检请求
浏览器在发送 PUT/DELETE 或带自定义头的请求前，会先发一个 OPTIONS 请求。Nginx 要主动返回 204，否则请求卡住：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 用
if ($request_method = 'OPTIONS') { return 204; }拦截 - 建议在 location 块里写，避免重复设置头；也可以在 if 内重新 add_header，确保预检响应也带 CORS 头
- 可选加
Access-Control-Max-Age缓存预检结果（比如设为1728000表示 20 天）
允许多个指定域名跨域（进阶写法）
Nginx 不支持 add_header 写多个值，但可用 map 模块动态匹配 Origin：
立即学习“前端免费学习笔记（深入）”；
- 在 http 块顶部定义映射关系，例如：
map $http_origin $cors_origin {<br> default "";<br> "~^https?://(www\.)?a\.com$" "$http_origin";<br> "~^https?://b\.net$" "$http_origin";<br>} - 在 server 或 location 中使用：
add_header 'Access-Control-Allow-Origin' $cors_origin; - 这样既安全又灵活，比硬编码更易维护
配合反向代理时的注意事项
如果 Virtual Host 本身是代理后端（比如 proxy_pass 到 http://localhost:3000），CORS 头应由 Nginx 统一添加，而不是后端再设：
- 后端和 Nginx 同时设 CORS 头可能冲突，推荐只留一层控制
- proxy_pass 后记得加
proxy_set_header Host $host;和proxy_set_header X-Real-IP $remote_addr;，保持原始请求信息 - 若需透传 Cookie，确保
proxy_cookie_domain和Access-Control-Allow-Credentials true同时生效
