为什么本地无后端服务时RTK-Query返回的originalStatus始终为200？

问题核心原因 #

你当前的配置是把所有API请求直接发送到承载前端页面的localhost:3000端口，这个端口运行的是前端静态开发服务器，而非后端服务。前端开发服务器默认开启了SPA历史路由fallback配置：所有未匹配到静态资源的请求，都会统一返回首页index.html文件，状态码为200，所以不会触发404错误。RTK Query默认会将响应内容按JSON格式解析，碰到HTML内容的首字符<就会抛出解析错误，和你拿到的报错完全吻合。

具体排查与修复方案 #

• 修正API请求的根地址
  你的后端服务如果运行在其他端口（比如常见的8000、3001等），需要将api.ts中的baseUrl修改为后端服务的实际地址，示例：

  baseUrl: 'http://localhost:8000/', // 替换为你的后端实际端口
  

  调整后请求会直接发往后端端口，后端未启动时就会返回你预期的404/连接失败错误。
• 若要保留相对路径配置，可新增开发服务器代理
  如果你不想写死绝对地址，可在前端开发工具（Vite/Webpack/CRA）中配置代理规则，将所有API前缀的请求（比如/api/）代理到后端端口，同时调整你的API路径统一加前缀，避免和前端路由冲突：
  1. 调整api.ts的baseUrl为/api/
  2. 调整getUser的请求路径为user/，最终请求地址为/api/user/
  3. 配置开发服务器代理，将所有/api/开头的请求转发到后端端口，同时根据规则调整是否去掉前缀
• 可选：增加响应类型校验
  你可以在fetchBaseQuery中新增响应拦截逻辑，判断返回的Content-Type如果不是application/json就直接抛出错误，避免无效解析：

  baseQuery: fetchBaseQuery({
    baseUrl: '/',
    prepareHeaders: (headers) => {
      const token = getCookie('csrftoken')
      if (token) {
        headers.set('X-CSRFToken', token)
      }
      return headers
    },
    responseHandler: async (response) => {
      const contentType = response.headers.get('content-type')
      if (!contentType || !contentType.includes('application/json')) {
        throw new Error('Response is not JSON')
      }
      return response.json()
    }
  })
  

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