React Query POST请求首次成功后反复报JSON解析错误求助

从错误栈来看，问题出在AxiosClient.js第22行的JSON.parse调用——你正在尝试解析字符串"[object Object]"，这显然不是合法JSON。结合你描述的"首次请求成功，后续带Cookie的请求失败"的现象，核心原因大概率是后续请求的响应内容不是合法JSON，或者Axios的响应处理逻辑错误。

排查与修复步骤： #

• 检查Axios客户端的响应处理逻辑
  打开AxiosClient.js第22行，确认你要解析的是response.data而非整个response对象。Axios的响应对象本身包含data、status等属性，若直接对response调用JSON.parse，会先把对象转成字符串"[object Object]"，进而触发解析错误。
  错误示例：

  // 错误：解析整个response对象
  const data = JSON.parse(response);
  

  正确写法：

  // 正确：解析响应体的data字段
  const data = JSON.parse(response.data);
  // 或者更简单：Axios默认会自动解析JSON，直接用response.data即可
  const data = response.data;
  

• 查看后续请求的实际响应内容
  打开浏览器DevTools的Network面板，执行刷新后的请求，查看该接口的Response内容：

  • 是否返回了HTML页面（比如后端因认证问题重定向到登录页、或返回错误页面）？
  • 检查响应头的Content-Type是不是application/json？如果是text/html或其他类型，Axios不会自动解析，此时response.data是字符串，直接parse会报错。

• 排查后端认证逻辑
  首次登录成功后，Cookie中保存了认证凭证，后续请求带上凭证后，后端可能因权限校验失败、会话失效逻辑异常等原因，返回了非JSON格式的错误内容。需要确认后端在认证状态下的接口响应格式是否统一为JSON。

• 添加错误处理逻辑
  在loginUser请求函数中添加响应格式校验，避免直接解析非JSON内容：

  async function loginUser(credentials) {
    try {
      const response = await axios.post('/api/login', credentials);
      // 校验响应格式
      if (typeof response.data !== 'object') {
        throw new Error('Invalid response format');
      }
      return response.data;
    } catch (error) {
      // 区分解析错误和其他错误
      if (error instanceof SyntaxError) {
        console.error('Response is not valid JSON:', error);
        // 可在此处清空Cookie并跳转登录页等
      }
      throw error;
    }
  }
  

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