RTK Query无法处理响应头为JSON的文本数据问题咨询

问题根源很明确：fetchBaseQuery默认会根据后端返回的Content-Type: application/json头，自动尝试用JSON.parse解析响应体，但实际返回的是纯文本，导致解析失败，请求直接进入错误分支，根本无法触发transformResponse。

解决方案：自定义parseResponse强制解析为文本 #

直接修改fetchBaseQuery的配置，覆盖默认的解析逻辑，强制以文本格式读取响应，再根据需求处理：

import { fetchBaseQuery, createApi } from '@reduxjs/toolkit/query/react';

const baseQuery = fetchBaseQuery({
  baseUrl: '/your-api-base-url',
  // 自定义响应解析逻辑，忽略Content-Type头
  parseResponse: async (response) => {
    // 先把响应读成纯文本
    const rawText = await response.text();
    // 可选：如果部分响应确实是JSON，尝试容错解析
    try {
      return JSON.parse(rawText);
    } catch (err) {
      // 解析失败就返回原始文本
      return rawText;
    }
  },
});

// 后续正常创建API Slice
export const yourApi = createApi({
  reducerPath: 'yourApi',
  baseQuery,
  endpoints: (builder) => ({
    // 你的接口定义
    getSomeData: builder.query({
      query: () => '/your-endpoint',
      // 现在可以正常使用transformResponse处理数据了
      transformResponse: (response) => {
        // 这里拿到的是已经解析好的文本或JSON对象
        return response;
      },
    }),
  }),
});

为什么这个方案有效？ #

parseResponse是fetchBaseQuery提供的核心钩子，执行时机在响应返回后、transformResponse之前。通过强制读取文本，我们绕过了默认的JSON解析逻辑，避免了解析失败导致的请求中断，确保transformResponse能正常接收到数据。

针对特定接口的优化 #

如果只有部分接口存在这个问题，可以创建一个带条件判断的parseResponse：

parseResponse: async (response, meta) => {
  // 根据请求路径判断是否需要特殊处理
  if (meta?.request.url.includes('/problem-endpoint')) {
    const rawText = await response.text();
    return rawText;
  }
  // 其他接口用默认解析逻辑
  return response.json();
},

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