前端拿不到 response 响应流返回的 header 例如 Content-Disposition 等

news2024/12/27 19:46:14

在这里插入图片描述

同步发布于我的网站 🚀

背景介绍
默认可访问的响应头
问题分析
解决方案
- 示例
前端代码示例
注意事项
总结

背景介绍

在进行前后端交互时，前端有时需要读取服务器返回的特定响应头（如 Content-Disposition），以便根据这些头信息执行相应的逻辑。然而，默认情况下，浏览器出于安全考虑，只允许前端访问某些特定的响应头，这导致了一些开发上的限制。

默认可访问的响应头

默认情况下，浏览器允许前端访问以下几种简单的响应头（simple response headers）：

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

这些响应头被称为“简单响应头”，前端可以通过 JavaScript 代码直接访问它们的值。

问题分析

当服务器在响应中添加了其他自定义的响应头（如 Content-Disposition），前端却无法直接访问这些头信息。原因在于这些自定义的响应头没有被“暴露”给外部，即没有被浏览器允许前端访问。

解决方案

为了使前端能够访问到这些自定义的响应头，服务器需要在响应中设置 Access-Control-Expose-Headers 头。这个头的作用是告诉浏览器哪些额外的响应头可以被前端访问。

示例

假设服务器希望前端能够访问 Content-Disposition 和 X-Custom-Header 这两个响应头，可以在响应中添加如下头信息：

Access-Control-Expose-Headers: Content-Disposition, X-Custom-Header

这样，前端就可以通过 JavaScript 代码访问这两个响应头的值了。

前端代码示例

以下是一个简单的前端代码示例，展示了如何通过 fetch API 访问响应头：

fetch('https://example.com/api/resource')
  .then(response => {
    // 检查响应头是否被正确暴露
    if (response.headers.has('Content-Disposition')) {
      const contentDisposition = response.headers.get('Content-Disposition');
      console.log('Content-Disposition:', contentDisposition);
    } else {
      console.log('Content-Disposition is not exposed.');
    }

    if (response.headers.has('X-Custom-Header')) {
      const customHeader = response.headers.get('X-Custom-Header');
      console.log('X-Custom-Header:', customHeader);
    } else {
      console.log('X-Custom-Header is not exposed.');
    }
  })
  .catch(error => {
    console.error('Error:', error);
  });