Nginx 跨域配置中怎么通过 add_header 添加 Access-Control-Allow-Origin 解决接口跨域问题-Nginx-PHP中文网

将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。

最有效接口跨域方案是在Nginx location块中精准配置全套CORS头：Access-Control-Allow-Origin（匹配具体域名）、Methods、Headers（大小写一致）、Allow-Credentials（true时Origin不可为*）、Max-Age；add_header须置于代理location内，显式处理OPTIONS预检并返回204；多源用map白名单实现。

nginx 跨域配置中怎么通过 add_header 添加 access-control-allow-origin 解决接口跨域问题

直接在 Nginx 的 `location` 块里用 `add_header` 设置 `Access-Control-Allow-Origin`，是最常用也最有效的接口跨域解决方式。关键不是加不加，而是加得准、加得全、加得对时机。

必须配齐的 CORS 响应头

单写 `Access-Control-Allow-Origin` 很容易失败，浏览器会因缺少配套头而拒绝响应：

Access-Control-Allow-Origin：必须与前端实际域名一致（如 https://app.example.com），若前端用了 withCredentials: true，这里绝不能用 *
Access-Control-Allow-Methods：列出真实用到的方法，比如 GET, POST, PUT, DELETE, OPTIONS，不能漏掉 OPTIONS
Access-Control-Allow-Headers：前端请求带了哪些自定义头（如 Authorization、X-User-ID），就必须原样列出来，大小写要完全匹配
Access-Control-Allow-Credentials：设为 true 才能传 Cookie，但此时 Origin 必须是具体域名，不可为通配符
Access-Control-Max-Age：建议设为 1728000（20 天），减少重复预检请求

把 add_header 放在正确的位置

`add_header` 不继承、不跨块生效，必须放在真正处理接口请求的 `location` 里：

如果后端服务走代理（如 proxy_pass http://localhost:3000），就把所有 add_header 写在该 location 块内
不要只写在 server 块顶层——静态资源和接口路径可能共用一个 server，但 CORS 要求不同，混写易出错
避免多个 add_header 指令冲突：Nginx 同一上下文中重复设置同一 header，后写的会覆盖前写的

显式处理 OPTIONS 预检请求

浏览器发复杂请求前必先发 OPTIONS，Nginx 默认不响应，必须手动拦截并返回 204：

用 if ($request_method = 'OPTIONS') { ... return 204; } 是最稳妥的做法
里面要补全所有 CORS 头（包括 Origin、Methods、Headers、Max-Age），否则预检失败
加上 Content-Length 0 和 Content-Type text/plain，确保响应体为空且类型明确

允许多个域名或动态 Origin

Nginx 原生不支持数组式配置，但可用 map 实现安全白名单：

在 http 块顶部定义映射：

map $http_origin $cors_origin {
    default "";
    "~^https://app\.example\.com$" $http_origin;
    "~^https://staging\.example\.com$" $http_origin;
}

在 location 中使用：add_header Access-Control-Allow-Origin $cors_origin;
这样既支持多源，又规避了 * + credentials 的冲突风险