服务端CORS配置显示正常却因重复允许来源头触发前端跨域拦截

核心根因 #

浏览器拦截请求的直接原因是响应中携带了两个及以上的Access-Control-Allow-Origin响应头，这类重复问题基本来自两层配置叠加，和预检返回200的状态不冲突——状态码正常不代表响应头符合规范。

排查步骤 #

• 先验证实际响应头的重复来源：在本地执行命令查看完整响应头：
  curl -I -X OPTIONS https://api.myapis.com/thisapi/particular/route/ -H "Origin: https://example.com" -H "Access-Control-Request-Method: POST"
  看返回结果里Access-Control-Allow-Origin出现的次数和值，只要出现多条，就可以确认叠加问题。
• 检查两类常见的叠头场景：
• 后端服务（即NGINX代理指向的http://localhost:1234应用）自身开启了CORS中间件，会自动往响应里注入Access-Control-Allow-Origin头，和NGINX层配置的add_header头叠加。NGINX的add_header不会覆盖后端返回的同名字段，只会追加，最终返回给浏览器的响应就会携带两个同名字段。
• NGINX配置存在层级嵌套：http块、server块中也写了CORS相关的add_header规则，和当前location /thisapi/块的配置没有做隔离，导致多层级的同名字段全部返回给客户端。

对应解决方案 #

选一层统一负责CORS响应头即可，不要两层同时配置：

方案1：由NGINX统一处理所有CORS规则 #

1. 关闭后端应用自身的CORS中间件配置，避免后端返回自带的CORS头
2. 在当前location块中增加proxy_hide_header规则，主动清除后端返回的冗余CORS头：

   location /thisapi/ {
     # 修正原配置的语法问题，proxy_set_header值前需要加空格
     proxy_set_header Host $host;
     proxy_set_header X-Forwarded-For $remote_addr;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_pass http://localhost:1234/;
     
     # 清除后端返回的冗余CORS头
     proxy_hide_header Access-Control-Allow-Origin;
     proxy_hide_header Access-Control-Allow-Methods;
     proxy_hide_header Access-Control-Allow-Headers;
     proxy_hide_header Access-Control-Allow-Credentials;
   
     # 统一配置CORS响应头
     add_header 'Access-Control-Allow-Origin' 'https://example.com' always;
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
     add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
     add_header 'Access-Control-Allow-Credentials' 'true' always;
   }
   

3. 检查http、server层级的全局CORS配置，如果存在同规则的add_header，要么删除，要么在当前location块中显式覆盖，避免嵌套叠加。

方案2：由后端服务统一处理CORS规则 #

1. 删除location /thisapi/块中所有和CORS相关的add_header配置，只保留反向代理的基础转发逻辑
2. 确保后端服务的CORS配置中，Access-Control-Allow-Origin的返回值严格匹配前端域名https://example.com，不返回通配符*（因为配置了允许携带凭证，通配符本身也不被浏览器允许）。

优化项：将OPTIONS预检请求放在NGINX层直接处理 #

不需要把OPTIONS请求转发到后端，既可以减少后端压力，也能从根源上避免预检环节的头重复问题，在location块中追加如下规则：

# 匹配OPTIONS预检请求直接返回
if ($request_method = OPTIONS ) {
  add_header 'Access-Control-Allow-Origin' 'https://example.com' always;
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
  add_header 'Access-Control-Allow-Credentials' 'true' always;
  # 预检结果缓存1天，减少重复预检
  add_header 'Access-Control-Max-Age' 86400;
  return 204;
}

内容的提问来源于stack exchange，提问作者djcaesar9114