部署后无法从后端服务器获取数据

Question

我使用 vite + React 创建前端，使用 Node.js + Express 和 mongoDB 创建后端。我的后端和前端都是使用 Render 托管的。银行端工作正常，因为我可以看到页面上显示的 json 对象。前端渲染正确，但无法从后端获取数据。

在控制台中：未捕获（承诺中）语法错误：意外的标记“N”，“未找到”不是有效的 JSON

在网络中：状态：404，类型：fetch

开发期间一切正常，但部署后就停止工作。我怀疑我的 vite.config.js 文件未正确设置以进行部署。

vite.config.js

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

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "https://gym-app-4y5d.onrender.com/",
      },
    },
  },
  plugins: [react()],
});

前端

export default function Leaderboard() {
  const [onerepmaxes, setOnerepmaxes] = useState(null);

  // Fetches data from backend
  useEffect(() => {
    const fetchOnerepmaxes = async () => {
      const response = await fetch('/api');
      const json = await response.json();

      if (response.ok) {
        setOnerepmaxes(json);
      }
    };

    fetchOnerepmaxes();
  }, []);

非常感谢任何类型的帮助！

Github 仓库： https://github.com/Bobsters6666/test-deployment
前端：https://gym-app-frontend.onrender.com/
后端：https://gym-app-4y5d.onrender.com/api

Answer 1

你找到答案了吗？如果有请告诉！