Le flacon réagit La demande GET échoue, mais la demande POST est réussie

voix
22

Je suis un peu débutant pour réagir. J'ai développé un Flask backend et maintenant je veux le coupler avec React pour le frontend.

J'utilise fetchin React pour faire la demande GET. Quand je lis les données, le texte ou la réponse à l'appel response.text()est le index.htmlfichier dans le publicrépertoire de mon application

Voici mon code de réaction :

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)
      })
  }

Voici le MRE de mon application flasque :

@app.route('/')
def index():
    return {'snippets':['blah','blaha']

Mon mandataire dans package.json

    proxy: http://127.0.0.1:5000/

Mon backend de flasque fonctionne au port 5000 et réagit au port 3000

Une chose à noter est qu'une requête POST (de <form>) est envoyée par proxy au serveur de base et que je peux récupérer le contenu de la requête POST dans un flacon. C'est la requête GET fetchqui ne fonctionne pas.

Structure du répertoire :

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

Voici getcodele répertoire de l'application flasque et getcode-clientcontient l'application React créée à l'aide create-react-app

NOTE : J'ai également essayé de mettre en place un proxy manuel comme ceci : https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

mais maintenant l'application react n'est pas affichée. Elle montre complètement la sortie json de mon backend de flasque

Créé 12/05/2020 à 12:30
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

Puisque vous utilisez CRA, je vous suggère d'utiliser leur paramètre de proxy.

Pour indiquer au serveur de développement de transmettre par proxy toute requête inconnue à votre serveur API en cours de développement, ajoutez un champ proxy à votre package.json, par exemple :

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

Dans votre cas, ce sera sur le port 5000.

En voici plus sur le sujet.

Toutefois, en production, je vous suggérerais d'utiliser nginx ou apache pour éviter tout problème à l'avenir.

Créé 15/05/2020 à 10:57
source utilisateur

voix
0

Je ne suis pas sûr, mais je pense que le problème est que vous utilisez à la fois React et Flask sur localhost, et que vous ne spécifiez pas le port dans les fetchrequêtes, essayez ceci :

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)
      })
  }
Créé 15/05/2020 à 10:49
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more