Ich bin ein bisschen ein Anfänger in Sachen Reagieren. Ich habe ein Flask-Backend entwickelt und möchte es nun mit React für das Frontend koppeln.
Die ich fetch
in React verwende, um die GET-Anfrage zu stellen. Wenn ich die Daten lese, response.text()
ist der Text oder die Antwort beim Aufruf die index.html
Datei im public
Verzeichnis meiner Anwendung
Hier ist mein react-Code:
componentDidMount() {
fetch('/')
.then(response => {
console.log(response.text()) //Here is the text() i said before
this.setState({ snippets: response.data })
})
.catch(error=>{
console.log(error)
})
}
Hier ist das MRE meiner Flask-Anwendung:
@app.route('/')
def index():
return {'snippets':['blah','blaha']
Meine Vertretung in package.json
proxy: http://127.0.0.1:5000/
Mein Kolben-Backend läuft auf Port 5000 und reagiert auf Port 3000
Eine Sache, die es zu beachten gilt, ist, dass eine POST-Anforderung (von <form>
) an den Backend-Server geproxed wird und ich den Inhalt der POST-Anforderung in Flash abrufen kann. Es ist die GET-Anforderung, mit fetch
der das nicht funktioniert.
Verzeichnis-Struktur:
-env
-getcode
-templates
-static
-__init__.py
-routes.py
-getcode-client
-src
-public
run.py
Hier getcode
ist das Verzeichnis der Flask-Anwendung und getcode-client
enthält die React-Anwendung, die mit create-react-app
HINWEIS: Ich habe auch versucht, einen manuellen Proxy wie diesen einzurichten: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
aber jetzt wird die react app nicht angezeigt. sie zeigt die Json-Ausgabe meines Flask-Backends vollständig an