Vite+React+TS+Express开发：前端无法获取API数据求助

你遇到的核心问题是Vite开发服务器没有将/api开头的请求代理到Express后端，导致请求被Vite的SPA fallback机制捕获，返回了前端的index.html页面。Vite并不支持在package.json中配置代理，必须在vite.config.ts里通过server.proxy来设置。

解决方案步骤 #

1. 修改vite.config.ts配置 #

在server选项中添加proxy配置，将/api开头的请求转发到你的Express后端地址（假设后端运行在http://localhost:3000，如果你的后端端口不同，替换成对应端口）：

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

export default defineConfig({
  build: {
    outDir: "dist",
  },
  server: {
    port: 3001,
    // 添加代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务地址
        changeOrigin: true, // 解决跨域问题
        // 可选：如果后端路由不带/api前缀，可以添加rewrite去掉前缀
        // rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  plugins: [react()],
});

2. 验证后端路由正确性 #

确保你的Express后端确实存在/api/data的路由，比如：

// Express后端示例代码
app.get('/api/data', (req, res) => {
  res.json({ message: '测试数据' });
});

3. 重启Vite开发服务器 #

修改配置后必须重启Vite，否则新的代理配置不会生效。

4. 重新测试请求 #

再次运行前端项目，发起/api/data请求，此时应该能正确获取到后端返回的JSON数据，而不是HTML页面。

额外注意点 #

• 如果你的后端API路由本身不带/api前缀，比如后端路由是/data，那么需要开启rewrite配置，把前端请求的/api/data重写为/data。
• 确认后端服务已经启动，并且运行在你配置的target地址上。

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