Nuxt3-$fetch响应头丢失

503 阅读2分钟

该问题解决方法

服务端返回的响应头设置 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的$fetchohmyfetch库,直接去看文档发现$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""***" }

至此该问题解决。