Nuxt.js中useFetch无法获取响应头，该如何解决？

问题核心 #

客户端日志看不到响应头是浏览器安全机制导致的：JS无法直接访问Set-Cookie这类敏感响应头，而服务端因直接接收完整响应能看到所有头。另外，Sanctum的CSRF令牌不需要手动从响应头提取——浏览器会自动处理并存储XSRF-TOKEN Cookie。

解决方案 #

1. 配置useFetch让浏览器自动处理Cookie #

修改请求配置，确保携带凭证信息，触发浏览器自动存储Cookie：

export default async () => {
    const runtimeConfig = useRuntimeConfig();
    const response = await useFetch(`${runtimeConfig.public.apiUrl}/sanctum/csrf-cookie`, {
        credentials: 'include', // 开启凭证携带，让浏览器存储Cookie
        onResponse({ request, response, options }) {
            console.log(`server side is ${process.server}`);
            // 客户端可通过document.cookie验证Cookie是否已存储
            if (!process.server) {
                console.log('当前Cookie:', document.cookie);
            }
        },
    });
    return response;
}

2. 后续请求自动带上CSRF令牌 #

发送后续接口请求时，保持credentials: 'include'配置，Nuxt的useFetch会自动从Cookie读取XSRF-TOKEN，并添加到X-XSRF-TOKEN请求头中，Laravel Sanctum会自动识别该头完成验证。

3. 客户端看不到响应头的原因 #

浏览器Fetch API出于安全限制，仅允许JS访问CORS安全列表内的响应头，Set-Cookie这类敏感头会被隐藏，但浏览器已在后台完成Cookie的存储操作。

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