React未通过指定代理与Flask后端通信问题排查

你的问题核心是Vite 不支持在 package.json 中配置 proxy 字段——这个配置是 Create React App（CRA）的专属方式，而你当前的项目是基于 Vite 的（从返回的 HTML 里的 /@vite/client 可以确认），所以代理规则根本没生效，请求 /time 被 Vite 自身的服务器接管，返回了 React 项目的首页 HTML，自然解析 JSON 会报错。

解决步骤 #

1. 在 Vite 配置文件中设置代理
   在项目根目录创建或修改 vite.config.ts，添加 server.proxy 配置：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     server: {
       proxy: {
         '/time': {
           target: 'http://localhost:5000',
           changeOrigin: true,
         }
       }
     }
   })
   

   这个配置会把所有以 /time 开头的请求转发到 Flask 服务器的 5000 端口。

2. 验证 Flask 服务是否正常运行
   确保 Flask 应用确实在 http://localhost:5000 启动，直接在浏览器访问 http://localhost:5000/time，应该能看到类似 {"time": 1720000000.123} 的 JSON 响应。如果访问不了，检查 Flask 是否启动，端口是否正确。

3. 修复 React 组件中的请求逻辑
   你的 useEffect 没有设置依赖数组，会导致组件每次渲染都发起请求，改成空数组只执行一次：

   useEffect(() => {
     fetch("/time")
       .then((res) => res.json())
       .then((data) => {
         setCurrentTime(data.time.toString());
       })
       .catch(err => console.error('请求失败:', err));
   }, []); // 这里必须加空数组
   

额外注意 #

如果之前项目是用 CRA 创建的，后来迁移到了 Vite，这类配置差异是常见的坑。Vite 的代理配置逻辑和 CRA 不同，必须通过 vite.config.ts 来设置。

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