React(Vite)前端请求Express后端路径错误致404问题

核心问题 #

1. 请求路径解析错误：在/quiz页面发起请求时，相对路径api/quiz/:quizId被浏览器解析为/quiz/api/quiz/:quizId，而非预期的/api/quiz/:quizId，导致404。首页请求正常是因为首页处于根路径/，相对路径解析逻辑适配根路径场景。
2. Vite代理显示问题：DevTools显示请求地址为127.0.0.1:5173是正常现象——Vite代理是在前端开发服务器内部完成转发，浏览器只会看到向本地端口发起的请求，实际已转发至4000端口的后端服务。

解决方案 #

1. 修复请求路径为绝对路径

将请求URI的开头添加/，强制从根路径开始拼接，避免当前页面路由影响路径解析：

修改请求代码中的uri部分：

const uri =
  queryParams.length > 0
    ? `/api/quiz/${id}?${queryParams.join("&")}`
    : `/api/quiz/${id}`;

2. 确认Vite代理配置有效性

当前vite.config.ts的代理配置是正确的，无需修改：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:4000",
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

注：Vite不支持package.json中的proxy字段（该配置属于Webpack生态），所以之前该配置无效是正常的，当前使用server.proxy的方式是Vite官方推荐的代理配置方案。

补充说明 #

• 浏览器相对路径解析规则：相对路径会基于当前页面的URL进行拼接，比如在http://127.0.0.1:5173/quiz页面中，api/quiz会被解析为http://127.0.0.1:5173/quiz/api/quiz；而添加/后，/api/quiz会直接从根路径开始，解析为http://127.0.0.1:5173/api/quiz，再通过Vite代理转发至后端的http://localhost:4000/api/quiz。

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