要让 Nginx 正确支持跨域请求，核心是通过 Access-Control-Allow-Origin 响应头告诉浏览器：哪些外部域名被允许访问当前资源。这不是简单加一行 header 就能生效，必须配合预检（OPTIONS）处理、凭证支持、方法与头字段声明等细节。
基础跨域响应头配置
在 server 或 location 块中添加以下指令，允许指定域名跨域访问：
严格指定域名（推荐）：add_header ‘Access-Control-Allow-Origin’ ‘https://example.com’; 注意：不能写多个域名，也不能用空格或逗号分隔；若需支持多个，需结合 $http_origin 动态判断。 不建议直接用 *（尤其带凭证时）：add_header ‘Access-Control-Allow-Origin’ ‘*’; 若同时设置 Access-Control-Allow-Credentials true，浏览器会拒绝该响应——* 和 credentials 不兼容。
支持携带 Cookie 的跨域请求
前端调用时设置 credentials: ‘include’，后端必须同步满足三项：
明确指定源域名（不能用 *） 开启凭证支持：add_header ‘Access-Control-Allow-Credentials’ ‘true’; 确保 Access-Control-Allow-Origin 与实际请求来源完全一致（协议、域名、端口）
例如前端来自 https://app.example.org:8080，Nginx 必须返回：Access-Control-Allow-Origin: https://app.example.org:8080
正确处理预检请求（OPTIONS）
当请求含自定义 header（如 Authorization）、非简单方法（PUT/DELETE）或 Content-Type 为 application/json 时，浏览器会先发 OPTIONS 预检。Nginx 需主动响应，而非透传给后端：
拦截 OPTIONS 请求并立即返回 204： if ($request_method = ‘OPTIONS’) {<br> add_header ‘Access-Control-Allow-Origin’ ‘$http_origin’;<br> add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS, PUT, DELETE’;<br> add_header ‘Access-Control-Allow-Headers’ ‘DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization’;<br> add_header ‘Access-Control-Max-Age’ 1728000;<br> add_header ‘Access-Control-Allow-Credentials’ ‘true’;<br> add_header ‘Content-Type’ ‘text/plain; charset=utf-8’;<br> add_header ‘Content-Length’ 0;<br> return 204;<br>} 注意：$http_origin 可动态匹配请求来源，但需确保它非空且可信（生产环境建议白名单校验）
常见陷阱与调试建议
跨域失败往往不是 header 没加，而是组合逻辑出错：
响应头被后端覆盖：如果后端应用（如 Node.js/Python）也输出 CORS 头，可能覆盖 Nginx 设置。建议统一由 Nginx 控制，后端关闭相关中间件。 HTTPS 与 HTTP 混用：浏览器认为 http://a.com 和 https://a.com 是不同源，Origin 值必须完全匹配。 缺少 Access-Control-Allow-Headers：前端若发送 X-Auth-Token，而 Nginx 未在 Allow-Headers 中声明，预检就会失败。 用浏览器开发者工具的 Network 标签页，查看请求的 Request Headers 中的 Origin，再比对 Response Headers 中的 Access-Control-Allow-Origin 是否精确匹配。
评论(0)