首次使用useQuery，登录后无法设置Cookie，请求技术排查

核心问题：登录后useMutation的onSuccess回调中data为undefined，无法获取后端返回的token，同时httpOnly Cookie未被前端正确处理（和useQuery无关，你实际使用的是useMutation）。

1. 修复Axios跨域配置，确保Cookie被浏览器接收 #

后端设置了httpOnly: true的Cookie，前端必须开启withCredentials才能让浏览器保存并自动携带该Cookie，否则会导致Cookie丢失，同时可能影响响应数据的正常返回。

修改Axios实例配置：

const http = axios.create({
  baseURL: process.env.NEXT_PUBLIC_REST_API_ENDPOINT,
  timeout: 30000,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  withCredentials: true, // 新增此行，允许跨域请求携带Cookie
});

后端配套要求：CORS配置需开启credentials: true，且不能用*作为允许的Origin，必须指定具体的前端域名（比如http://localhost:3000）。

2. 确保Axios正确返回响应数据 #

Axios的post方法返回的是包含data字段的完整响应对象，而非直接返回后端的JSON数据。你需要明确提取响应体：

修改login函数：

async function login(input: LoginInputType) {
  const response = await http.post(API_ENDPOINTS.LOGIN, input);
  return response.data; // 返回后端实际返回的JSON数据，而非整个Axios响应对象
}

或者不修改login函数，直接在onSuccess中调整取值：

onSuccess: (response: any) => {
  console.log(response.data); // 此处才是后端返回的{ data: user, token }
  Cookies.set('auth_token', response.data.token);
  authorize();
  closeModal();
},

3. 优化httpOnly Cookie的处理逻辑 #

后端设置的httpOnly: true Cookie，前端无法通过Cookies.get或document.cookie读取（浏览器安全机制），因此你之前的getToken函数实际上拿不到该Cookie，需要调整请求头逻辑：

删除Axios请求拦截器中手动添加Authorization的代码，因为httpOnly Cookie会自动随请求发送给后端：

http.interceptors.request.use(
  (config) => {
    // 移除以下两行代码：
    // const token = getToken();
    // config.headers.Authorization = `Bearer ${token ? token : ''}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

后端直接通过req.cookies.auth_token获取token进行身份验证即可。

验证步骤 #

1. 登录请求的Network面板中，Request Headers会出现Cookie字段（首次登录为空，后续请求自动携带），Response Headers的Set-Cookie会被浏览器正常保存。
2. onSuccess回调中能正确打印后端返回的用户数据和token。
3. 后续API请求会自动携带httpOnly Cookie，后端可正常验证用户身份。

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