Flask React GET-Anforderung schlägt fehl, aber POST-Anforderung ist erfolgreich

Question

Flask React GET-Anforderung schlägt fehl, aber POST-Anforderung ist erfolgreich

stimmen

22

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 fetchin 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.htmlDatei im publicVerzeichnis 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 fetchder das nicht funktioniert.

Verzeichnis-Struktur:

-env
-getcode
  -templates
  -static
  -__init__.py
  -routes.py
-getcode-client
  -src
  -public
run.py

Hier getcodeist das Verzeichnis der Flask-Anwendung und getcode-cliententhä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

python reactjs flask fetch

Veröffentlicht am 12/05/2020 um 12:30
quelle vom benutzer Code Yard

In anderen Sprachen...

2 antworten

Damian Busz · Answer 1 · 2020-05-15 10:57

Da Sie CRA verwenden, würde ich vorschlagen, deren Proxy-Einstellung zu verwenden.

Um den Entwicklungsserver anzuweisen, alle unbekannten Anfragen an Ihren API-Server während der Entwicklung zu proxyen, fügen Sie z.B. ein Proxy-Feld zu Ihrer package.json hinzu:

"proxy": "http://localhost:4000",

In Ihrem Fall wird dies auf Port 5000 stehen.

Hier finden Sie mehr zum Thema.

Bei der Produktion würde ich jedoch vorschlagen, nginx oder apache zu verwenden, um Probleme in der Zukunft zu vermeiden.

Dex · Answer 2 · 2020-05-15 10:49

Ich bin mir nicht sicher, aber ich glaube, das Problem liegt darin, dass Sie sowohl React als auch Flask auf localhost verwenden und den Port in den fetchAnfragen nicht angeben:

componentDidMount() {
    fetch('/:5000')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error=>{
        console.log(error)
      })
  }