reactjs - Typescript, React, Vite, Express: ვერ ხდება მონაცემების მიღება ფრონთენდზე

მე ვქმნი აპლიკაციას Express-თან ერთად backend-ზე და React-თან ერთად frontend-ზე TypeScript-ით, და ვიყენებ Vite-ს frontend-ის ასაშენებლად (ეს არის ჩემი პირველი ტრიბუტი Vite-ს გამოყენების). ჩემი API-ები კარგად მუშაობენ, მაგრამ ვერ ვღებულობ მონაცემებს frontend-ზე. მარტივი კოდი frontend-ზე:

 React.useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("/api/data");
      const json = await response.json();

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

    fetchData();
  }, []);

ეს მუდმივად მიგზავნის ამ HTML-ს პასუხში:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx?t=1675714554862"></script>
  </body>
</html>

ვცადე აღნიშნული სკრიპტების დამატება ჩემს HTML ფაილში, მაგრამ შეცდომა რჩება. არ ვარ დარწმუნებული, იქნებ ეს იყოს vite.config.ts-ში:

export default defineConfig({
  build: {
    outDir: "dist",
  },
  server: {
    port: 3001,
  },
  plugins: [react()],
});

მე მივეცი პროქსი package.json ფაილში CORS-ის დასალაგებლად, მაგრამ ეს პრობლემა არ ჩანს. მგონია, რაღაც მნიშვნელოვანს ყურადღებას არ ვაქცევ, მაგრამ არ ვიცი რა... ვინმემ შეიძლება დამეხმაროთ?

პასუხი #1

თვითონ გინდათ დააყენოთ პროქსი თქვენს Vite კონფიგურაციაში.

https://vitejs.dev/config/server-options.html#server-proxy

უპირებთ, რომ თქვენი API-ს ესმით პორტზე 3000, დაამატეთ ეს proxy თვისება თქვენს server ობჯექტში:

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      secure: false
    }
  }
}