如何在Nginx上配置CORS？按教程配置后仍未生效该如何解决

常见失效原因 #

• add_header继承问题：Nginx的add_header指令不隐式继承上层配置，如果你的CORS头配置在http/server块，而当前匹配的location块内有其他add_header配置，上层的CORS头会完全失效，需要把CORS头配置复制到对应location块，或者使用always参数强制输出头。
• 未处理OPTIONS预检请求：浏览器发送跨域非简单请求前会先发送OPTIONS预检请求，若Nginx未单独处理该请求、将其转发到后端服务时，后端未返回正确CORS头就会导致跨域失败。
• 缺少必要的CORS头：你当前的配置缺少Access-Control-Allow-Headers字段，如果请求携带自定义请求头（比如Content-Type: application/json、Authorization等），就会触发跨域拦截。
• 带凭证场景下通配符失效：如果你的请求带cookie、HTTP认证信息等凭证，Access-Control-Allow-Origin不能使用*，必须替换为具体的请求源地址，同时需要新增Access-Control-Allow-Credentials: true配置。

修正后的配置参考 #

# 放在对应的server/location块内，增加always参数强制所有响应都返回头
add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS" always;
add_header Access-Control-Allow-Headers * always;
add_header Access-Control-Expose-Headers * always;
add_header Access-Control-Max-Age 86400 always;

# 单独处理OPTIONS预检请求，直接返回204
if ($request_method = OPTIONS) {
    return 204;
}

# 原有安全头保留，同样增加always参数
add_header X-Frame-Options SAMEORIGIN always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options nosniff always;

如果是带凭证的跨域请求，把Access-Control-Allow-Origin的*替换为实际的请求源域名，比如https://example.com，同时新增一行add_header Access-Control-Allow-Credentials true always;。

验证方法 #

配置重载后，用curl命令验证响应头是否正确：

curl -I -X OPTIONS -H "Origin: 你的前端页面地址" -H "Access-Control-Request-Method: POST" 你的接口地址

检查返回的响应头中是否包含上述配置的CORS相关字段即可。

内容的提问来源于stack exchange，提问作者Thừa Danh