Vite+React+Redux Toolkit请求返回自身index.html问题求助

核心问题 #

RTK请求返回前端index.html的根源是请求路径未匹配Vite代理规则，导致Vite把API请求当成SPA路由，触发fallback机制返回index.html。手动fetch能正常工作，大概率是你在fetch里手动加了/api前缀，但RTK的请求路径没加这个前缀。

具体修复步骤 #

1. 修正API请求路径前缀 #

检查你的SECTIONS_URL常量，确保它以/api开头，和Vite代理配置的前缀一致：

// 示例：constants.js
export const SECTIONS_URL = '/api/sections';

这样RTK生成的请求URL会是/api/sections、/api/sections/${sectionUrl}，能被Vite代理捕获并转发到后端服务。

2. 确认Vite代理配置匹配后端路由 #

你的Vite代理配置中，rewrite: (path) => path.replace(/^\/api/, "")会把/api/sections重写为/sections，正好匹配后端的app.use("/sections", sectionRoutes)，这个配置本身是正确的，不需要修改。

3. 移除不必要的responseHandler #

之前添加的responseHandler: "text"是因为请求返回了index.html（非JSON格式）导致解析错误，现在路径正确后，后端会返回标准JSON，所以删掉这个配置，让RTK自动解析JSON：

// sectionApiSlice.js 修改getSectionByUrl
getSectionByUrl: builder.query({
    query: (sectionUrl) => ({
        url: `${SECTIONS_URL}/${sectionUrl}`,
        // 移除responseHandler: "text"
    }),
    keepUnusedDataFor: 5,
}),

4. 验证请求路径 #

启动项目后，打开浏览器DevTools的Network面板，查看RTK发送的请求URL：

• 正确格式：http://localhost:3000/api/sections/xxx
• 如果看到的是http://localhost:3000/sections/xxx，说明还是没加/api前缀，回到第一步检查常量配置。

额外注意事项 #

• 不要把index.html放到public文件夹，Vite默认入口文件在项目根目录，放public会导致资源加载路径错误，引发浏览器崩溃。
• 后端的CORS配置已经启用，配合Vite代理可以正常处理跨域，不需要额外调整。

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