Wie kann das Problem mit der „CORS-Richtlinie“ gelöst werden, wenn Anfragen vom React-Front-End an das Node.js-Back-End gesendet werden?

[satyam11]

Ich arbeite an einem Full-Stack-Entwicklungsprojekt und verwende React für das Front-End und Node.js für das Back-End. Beim Versuch, HTTP-Anfragen von meinem React-Frontend an das Node.js-Backend zu senden, tritt ein „CORS-Richtlinienfehler“ auf, der verhindert, dass die Anfragen erfolgreich sind.

Hier ist der Codeausschnitt aus meinem React-Frontend, an den ich die Anfrage sende:

// Front-end React Component
import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState('');

  const fetchData = async () => {
    try {
      const response = await axios.get('http://localhost:5000/api/data');
      setData(response.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      <p>{data}</p>
    </div>
  );
};

export default App;

Und hier ist der Codeausschnitt aus meinem Node.js-Backend:

// Back-end Node.js
const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  const data = 'Sample data from the server';
  res.json(data);
});

const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Ich habe gehört, dass dieses Problem durch die CORS-Richtlinie (Cross-Origin Resource Sharing) verursacht wird, bin mir aber nicht sicher, wie ich es in meinem Projekt beheben kann. Ich habe versucht, mehrere Plattformen wie Scaler zu verwenden, konnte aber keine Lösung finden. Könnte jemand freundlicherweise eine Schritt-für-Schritt-Anleitung oder ein Beispiel für funktionierenden Code anbieten, um das Problem mit der „CORS-Richtlinie“ zu beheben und mein React-Front-End in die Lage zu versetzen, Anfragen korrekt an mein Node.js-Back-End zu senden?

 

[Oneixee5]

Die absolte URL 'http://localhost:5000/api/data' im Programm zu halten ist nicht zielführend. Du willst ja später mal den echten Server mit einer öffentlichen URL ansprechen.
Also du musst relaive URL's verwenden: 'api/data'
Deinem Dev-Server spendierst du eine Weiterleitung (kann je nach Dev-Server anders aussehen):

    ...
    devServer: {
      https: false,
      port: 8080,
      open: false, 
      proxy: {
        "/api/data/**": {
          target: "http://localhost:5000",
          headers: proxyHeaders
        },
        ....

Dann kannst du deinen Webseite über den Dev-Server: localhost:8080 aufrufen und dieser leitet automatisch zum Backend unter Port 5000 weiter. Für deine Webseite sieht es so aus als würdest du den Dev-Server nie verlassen - damit gibt es auch kein Cors-Problem.
Ich weiß jetzt natürlich nicht wie du dein React-Project aufgesetzt hast, wenn du webpack verwendest wäre das: https://webpack.js.org/configuration/dev-server/#devserverproxy