该问题解决方法
服务端返回的响应头设置 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" → "***" }
至此该问题解决。