如何在koa-cors中配置Access-Control-Expose-Headers以获取自定义响应头？

这个问题我之前踩过坑！核心原因是**跨域资源共享（CORS）**的浏览器限制——默认情况下，只有少数标准响应头（比如Content-Type、Cache-Control这些）会被暴露给前端的Fetch API，你自定义的Search-type头不在这个默认列表里，所以即使后端设置了、Postman能看到，前端也拿不到。

解决步骤 #

1. 后端添加CORS暴露头配置
   在你的Koa控制器里，除了设置自定义响应头，还要额外添加Access-Control-Expose-Headers头，明确告诉浏览器可以把你的自定义头暴露给前端：

   exports.getItems = async (ctx) => {
     ctx.set('Search-type', 'category');
     // 关键：把自定义头加入允许暴露的列表
     ctx.set('Access-Control-Expose-Headers', 'Search-type');
     // 如果有多个自定义头，用逗号分隔：
     // ctx.set('Access-Control-Expose-Headers', 'Search-type, X-Another-Header');
   };
   

2. 前端获取自定义头
   后端配置好之后，前端就可以通过Fetch的response.headers.get()方法拿到这个头的值了：

   fetch('/your-api-endpoint')
     .then(response => {
       // 获取自定义响应头
       const searchType = response.headers.get('Search-type');
       console.log('Search-type:', searchType); // 输出 'category'
       return response.json();
     })
     .catch(error => console.error('请求出错:', error));
   

补充说明 #

• 如果你的请求是同域的，其实不会有这个问题，但一般前后端分离项目都是跨域的，所以必须加这个配置。
• Postman不受浏览器CORS限制，所以它能直接看到所有响应头，这就是为什么Postman能拿到但前端不行的原因。

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