Vite项目Axios请求报404错误，Postman正常，求解决方案

针对你遇到的情况，按以下步骤排查解决：

1. 修正Vite代理配置（关键） #

Vite 不支持在package.json中配置proxy，必须在vite.config.js（或.ts）中配置服务器代理。删除package.json里的proxy字段，替换为以下配置：

import { defineConfig } from 'vite'
// 引入对应框架的插件，比如React/Vue
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      // 匹配你的API请求前缀，比如请求路径是/projects/xxx，就写'/projects'
      '/projects': {
        target: 'http://localhost:8000',
        changeOrigin: true, // 必须开启，解决跨域问题
        // 如果后端接口没有/projects前缀，可添加rewrite去掉前缀：
        // rewrite: (path) => path.replace(/^\/projects/, '')
      }
    }
  }
})

配置后重启Vite开发服务器，确保代理生效。

2. 检查请求路径与Axios配置 #

• 确保请求使用相对路径，比如：

  // 正确：相对路径，会被代理转发到target
  await axios.get(`/projects/${projectId}`)
  // 错误：绝对路径会绕过代理，直接请求8000端口（若前端在其他端口可能跨域或404）
  await axios.get(`http://localhost:8000/projects/${projectId}`)
  

• 确认projectId在请求发送时已正确赋值：可在useEffect中加日志验证：

  console.log('请求路径:', `/projects/${projectId}`)
  

3. 修复useEffect执行逻辑 #

注释useEffect后错误消失，说明请求可能在projectId未就绪时发送，或缺少错误捕获：

• 增加条件判断，确保projectId存在时才发起请求：

  useEffect(() => {
    // 当projectId为空时不执行请求
    if (!projectId) return;
  
    const fetchProject = async () => {
      try {
        const response = await axios.get(`/projects/${projectId}`);
        // 处理响应数据
      } catch (error) {
        // 捕获并处理错误，避免Uncaught (in promise)报错
        console.error('请求失败:', error.response?.data || error.message);
      }
    };
  
    fetchProject();
  }, [projectId]); // 依赖项添加projectId，确保值更新时重新请求
  

4. 验证端口与请求实际地址 #

• 检查前后端端口是否真的不冲突：Vite默认开发端口是5173，若你说前后端都在8000，必然有一个服务启动失败。确认前端实际运行端口（比如5173），后端在8000，代理配置才能生效。
• 打开浏览器开发者工具→Network面板，查看请求的实际URL和响应详情：
  • 如果请求URL是http://localhost:5173/projects/ping-pong-game，状态码404，说明代理未正确转发，检查vite.config.js的匹配规则。
  • 如果请求URL是http://localhost:8000/...，说明用了绝对路径，改为相对路径即可。

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