刘勇虎的官方网站

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

背景介绍

在进行前后端交互时，前端有时需要读取服务器返回的特定响应头（如 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);
  });

注意事项

1. CORS 配置：确保服务器的 CORS 配置正确，允许前端访问所需的资源。
2. 安全性：谨慎设置 Access-Control-Expose-Headers，避免暴露敏感信息。
3. 兼容性：虽然现代浏览器普遍支持 Access-Control-Expose-Headers，但仍需注意老版本浏览器的兼容性问题。

总结

通过设置 Access-Control-Expose-Headers，服务器可以控制哪些响应头可以被前端访问。这对于需要读取特定响应头的前端应用非常有用。希望本文对您有所帮助！