Nginx 跨域配置中怎么配置 Access-Control-Expose-Headers 允许前端获取自定义响应头-Nginx-PHP中文网

必须在 nginx 的 api location 块中通过 add_header access-control-expose-headers 显式声明需暴露的自定义响应头（如 x-request-id），并确保其作用于实际业务响应和 options 预检请求，且头名大小写、格式严格匹配后端返回值。

nginx 跨域配置中怎么配置 access-control-expose-headers 允许前端获取自定义响应头

要在 Nginx 中让前端 JavaScript（如 fetch 或 XMLHttpRequest）成功读取自定义响应头（比如 X-Request-ID、X-RateLimit-Remaining），必须在服务端明确通过 Access-Control-Expose-Headers 响应头声明哪些自定义头可被暴露。仅设置 Access-Control-Allow-Origin 是不够的。

明确列出需要暴露的自定义响应头

浏览器默认只允许脚本访问简单的响应头（如 Cache-Control、Content-Language、Content-Type 等）。其他头必须显式声明。例如，若后端返回了 X-Trace-ID 和 X-Backend-Version，Nginx 配置中需写：

add_header Access-Control-Expose-Headers "X-Trace-ID, X-Backend-Version";

注意：
• 头名之间用英文逗号加空格分隔（推荐格式）；
• 不要包含空格以外的多余字符（如中文逗号、引号嵌套错误）；
• 大小写敏感，需与后端实际返回的头名完全一致（HTTP 头名通常规范为首字母大写驼峰）。

确保该指令作用于正确 location 块且不被覆盖

这个 add_header 必须出现在能匹配到实际 API 接口的 location 块中，且不能被子块中同名指令覆盖。常见错误是只在根 server 块或 OPTIONS 预检块里配置，而没在真正返回业务响应的 location 里设置。

推荐写法示例：

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

location /api/ {
  proxy_pass http://backend;
  add_header Access-Control-Allow-Origin "$http_origin";
  add_header Access-Control-Expose-Headers "X-Request-ID, X-RateLimit-Reset";
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  add_header Access-Control-Allow-Headers "Content-Type, Authorization";
  # 其他 proxy_* 配置...
}