NextJS 13中TanStack Query出现jwt must be provided错误求助

问题场景 #

用户完成邮箱密码登录后，Middleware会验证JWT并将用户重定向至首页。使用axios结合useEffect调用/api/me接口能正常获取用户信息，但改用TanStack Query的useQuery实现时，接口返回data: { error: 'jwt must be provided' }错误，需解决该问题以正常使用TanStack Query。

不工作的UserDetails.tsx代码 #

"use client";

interface Data {
  id: string;
  username: string;
  email: string;
}

export default function UserDetails() {
  const { data } = useQuery({
    queryFn: async () => {
      const { data } = await axios.get("http://localhost:3000/api/me");
      return data as Data;
    },
  });

  return (
    <div>
      <h1>{JSON.stringify(data)}</h1>
    </div>
  );
}

可正常工作的代码（axios+useEffect） #

"use client";
import axios from "axios";
import { useEffect, useState } from "react";
export default function UserDetails() {
  const [userData, setUserData] = useState({
    name: "",
    email: "",
  });

  useEffect(() => {
    const getUserDetails = async () => {
      const res = await axios.get("/api/me");
      if (res.status === 200) {
        setUserData({
          name: res.data.data.username,
          email: res.data.data.email,
        });
      }
    };
    getUserDetails();
  }, []);

  return (
    <div>
      <h1>{userData.name}</h1>
      <h1>{userData.email}</h1>
    </div>
  );
}

错误原因 #

核心问题在于请求URL的写法差异：

• 不工作的代码使用了绝对路径http://localhost:3000/api/me，浏览器会将其视为跨域请求（即使是本地域名），不会自动携带当前域名下的HttpOnly Cookie，导致/api/me接口无法从Cookie中读取JWT，触发"jwt must be provided"错误。
• 工作的代码使用了相对路径/api/me，请求会发送到当前域名，浏览器自动携带对应的Cookie，接口能正常获取JWT并返回用户信息。

解决方案 #

修改TanStack Query中的请求URL为相对路径，并适配接口返回结构：

"use client";

interface Data {
  id: string;
  username: string;
  email: string;
}

export default function UserDetails() {
  const { data } = useQuery({
    queryKey: ["userDetails"], // 添加queryKey，符合TanStack Query最佳实践
    queryFn: async () => {
      const { data } = await axios.get("/api/me"); // 改为相对路径
      return data.data as Data; // 接口返回结构为{message, data}，需取内层data字段
    },
  });

  return (
    <div>
      <h1>{JSON.stringify(data)}</h1>
    </div>
  );
}

额外检查点：

• 确认TanStack Query配置未修改请求的Cookie携带行为，默认axios会自动携带同域Cookie。
• 登录接口中httpOnly的配置在开发环境为false，生产环境需确保开启以提升安全性。

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