该问题解决方法

服务端返回的响应头设置 access-control-expose-headers : *

起因

全局响应拦截器需要根据响应头中的内容来执行刷新token，但是拦截器中无法获得响应头的所有值具体如下

在控制台查看网络请求结果响应头如下：(含有x-token)

HTTP/1.1 200 OK
vary: Origin
access-control-allow-origin: *
x-token: ***
content-type: application/json; charset=utf-8
content-length: 49
Date: Thu, 09 Mar 2023 15:03:19 GMT
Connection: keep-alive
Keep-Alive: timeout=72

响应拦截代码：

async onResponse({ response }) {
            if (process.client) {
                const XTokenKey = "x-token" as const
                if (response.headers.has(XTokenKey)) {
                    token.SaveToken(<string>response.headers.get(XTokenKey));
                }
            }           
        }

通过控制台log打印response.headers：

Headers { "content-length" → "49", "content-type" → "application/json; charset=utf-8" }

缺少了很多响应头

思路

求解路程 Nuxt3的$fetch是ohmyfetch库，直接去看文档发现$fetch.raw方法，尝试无果。去Github找这个库的issue看看有没有一样的情况，有custom-headers无法读取的issue，维护者提供的方法是使用$fetch.raw，明显不是。

问问newbing吧

Q:浏览器fetch无法获得响应头可能是为什么

newbing:
浏览器fetch无法获得响应头可能有以下几种原因：

-   服务器没有返回响应头或者响应未收到。
-   响应头被浏览器的同源策略或者CORS机制拦截了。
-   响应头的键名不在 fetch API 的安全白名单中。

希望这些信息对你有帮助。👍

MDN有提到-响应头被浏览器的同源策略或者CORS机制拦截了。 检查一下，发现有access-control-expose-headers属性，在后端配置为access-control-expose-headers:*测试一下

Headers(9) { 
"access-control-allow-origin" → "*",
"access-control-expose-headers" → "*", 
connection → "keep-alive",
"content-length" → "49", 
"content-type" → "application/json; charset=utf-8",
date → "Thu, 09 Mar 2023 15:21:42 GMT",
"keep-alive" → "timeout=72",
vary → "Origin",
"x-token" → "***" }

至此该问题解决。