React项目使用axios无法获取Content-Disposition响应头问题咨询

可以读取，该问题和React、Axios本身无关，是浏览器CORS安全策略的默认限制导致。

• 根本原因：浏览器的CORS规范默认仅允许前端JavaScript访问以下6个基础响应头：
  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma
    不在上述列表中的响应头（包括Content-Disposition），需要后端显式配置暴露后前端才能读取。
• 解决方法：需要后端在接口响应头中新增Access-Control-Expose-Headers配置，将需要暴露给前端的字段加入列表，示例配置如下：

  Node.js Express 后端配置示例：

  res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition')
  

  Java SpringBoot 后端配置示例：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .exposedHeaders("Content-Disposition");
      }
  }
  

• 前端读取注意事项：Axios会自动将响应头的键转为全小写，所以使用response.headers['content-disposition']的写法是正确的，后端配置完成后即可正常拿到对应值。如果需要提取文件名可以参考以下代码：

  const contentDisposition = response.headers['content-disposition']
  const filename = contentDisposition.match(/filename="?([^"]+)"?/)?.[1] || 'download.pdf'
  

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