嵌入页面不能正常获取 reponse header : content-disposition

问题表现：

在本系统中，通过 Axios 发起文件下载请求时可以正常获取到 Content-Disposition 响应头，从而正确解析文件名。然而，在嵌入页面（如 iframe 或其他方式）发起相同请求时，前端却无法获取到该响应头，导致文件下载逻辑无法正常工作。

问题原因：

浏览器的安全策略默认限制了跨域请求对某些敏感响应头字段的访问，除非服务器明确指定了允许暴露这些字段。Content-Disposition 是一个被保护的响应头之一，因此在没有特别配置的情况下，跨域请求将无法读取此头部信息。

解决办法：

为了使前端能够成功获取 Content-Disposition 响应头，需要在 Nginx 配置中添加如下设置：

add_header Access-Control-Expose-Headers "Content-Disposition";

添加后的代码如下：

location /admin/ {
    #client_max_body_size                0;
    #proxy_connect_timeout 300s;
    #proxy_send_timeout   900;
    #proxy_read_timeout   900;
    #proxy_buffer_size    32k;
    #proxy_buffers      4 32k;
    #proxy_busy_buffers_size 64k;
    #proxy_redirect     off;
    #proxy_hide_header  Vary;
    proxy_set_header Accept-Encoding '';
    proxy_set_header Host $host;
    #proxy_set_header   Referer $http_referer;
    #proxy_set_header   Cookie $http_cookie;
    #proxy_set_header   X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Connection '';
    proxy_http_version 1.1;
    #chunked_transfer_encoding off;
    proxy_buffering off;
    #proxy_cache off;
    #proxy_headers_hash_max_size 51200;
    #proxy_headers_hash_bucket_size 6400;
    #proxy_intercept_errors on;
    #fastcgi_read_timeout 600s;
    # == cros ==
    add_header Access-Control-Allow-Origin $allow_origin always;
    add_header Access-Control-Allow-Headers $allow_headers always;
    add_header Access-Control-Allow-Methods $allow_methods always;

    add_header Access-Control-Allow-Credentials "true";
    # 明确暴露 Content-Disposition 头
    add_header Access-Control-Expose-Headers "Content-Disposition";
    
    if ($request_method = 'OPTIONS') {
      return 204;
    }
    proxy_pass http://admin/;
  }

验证方法

1. 检查 Nginx 配置是否生效：

   重启 Nginx 服务后，使用命令行工具（如 curl）或浏览器开发者工具查看实际返回的响应头中是否包含了 Access-Control-Expose-Headers 字段，并且其值为 Content-Disposition。

2. 测试前端代码：

   确保前端应用能够正确接收到并解析 Content-Disposition 响应头中的内容，例如文件名等信息。

相关知识点

1. CORS（跨域资源共享）：

   CORS 是一种安全机制，用于限制 Web 应用程序只能向同源服务器发送请求。通过设置特定的 HTTP 头来实现跨域访问控制。

2. Content-Disposition：

   主要用于指示客户端如何处理即将接收到的数据，最常见的用法是告诉浏览器以附件形式下载文件以及指定文件名。

常见问题及注意事项

1. 确保所有环境一致：

   如果开发、测试和生产环境中使用了不同的域名或协议，请确保每个环境下的 Nginx 配置都已正确更新。

2. 检查其他中间件影响：

   有时候除了 Nginx 之外还会有其他的反向代理或网关组件，它们也可能会影响最终到达客户端的响应头，所以要确认整个链路上都没有遗漏配置。

3. 浏览器兼容性：

   尽管现代主流浏览器普遍支持 CORS 特性，但仍需注意不同版本之间可能存在细微差异，尤其是在处理一些非标准头部时。