RTK Query请求异常：误访问index.html而非指定API端点

核心问题定位 #

请求地址仅为http://localhost:，缺失端口号与完整API路径，导致请求被前端开发服务器接管，返回首页index.html而非后端API的JSON响应，进而触发JSON解析错误（HTML起始符<不属于合法JSON字符）。

具体修复步骤 #

1. 修正RTK Query的baseUrl配置 #

打开state/api.ts，检查createApi的baseQuery配置，确保baseUrl是完整的后端API地址：

// 正确示例（假设后端服务运行在3001端口，API前缀为/api）
const baseQuery = fetchBaseQuery({ baseUrl: 'http://localhost:3001/api' });

• 禁止只写localhost:这类不完整地址，必须包含端口号和必要的API前缀。

2. 检查API endpoints的路径拼接 #

确认endpoints中定义的查询路径拼接逻辑正确：

// 示例：baseUrl为http://localhost:3001/api时，路径不要以/开头
endpoints: (builder) => ({
  getKpiData: builder.query({
    query: () => 'kpi/data', // 最终请求地址：http://localhost:3001/api/kpi/data
  }),
})

• 如果baseUrl末尾带有/，endpoint路径可以以/开头，避免重复拼接出//。

3. 验证环境变量配置（若使用） #

如果通过环境变量存储API地址：

• 确保.env文件中的变量格式正确（前端环境变量需带对应框架前缀，比如React的REACT_APP_）：

  REACT_APP_API_BASE_URL=http://localhost:3001/api
  

• 代码中正确读取变量：process.env.REACT_APP_API_BASE_URL，避免拼写错误。

4. 单独验证后端路由可用性 #

用Postman或浏览器直接访问后端API地址（比如http://localhost:3001/api/kpi/data）：

• 若返回HTML，检查routes/kpi.js中的路由路径、请求方法是否与前端调用匹配
• 确认后端服务已启动在指定端口，无端口冲突

5. 检查前端代理配置（可选） #

如果使用前端代理转发API请求（比如Vite的vite.config.js或Create React App的package.json）：

• 确保代理规则正确，比如：

  // package.json（Create React App）
  "proxy": "http://localhost:3001"
  

  此时RTK Query的baseUrl可简写为/api，会自动转发到后端服务。

额外排查点 #

• 检查main.tsx中的store配置，确认RTK Query的API中间件已正确添加到store
• 确认Row1.tsx调用useGetKpiDataQuery时，未错误修改请求路径参数
• 清除浏览器缓存，避免旧的请求地址缓存干扰

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