La solicitud de Flask React GET está fallando pero la solicitud POST es exitosa

Question

La solicitud de Flask React GET está fallando pero la solicitud POST es exitosa

votos

22

Soy un poco principiante para reaccionar. Desarrollé un Flask backend y ahora quiero emparejarlo con React para el frontend.

Que estoy usando fetchen React para hacer la solicitud de GET. Cuando leo los datos, el texto o la respuesta cuando llamo response.text()es el index.htmlarchivo en el publicdirectorio de mi aplicación

Aquí está mi código de reacción:

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

Aquí está el MRE de mi aplicación de frascos:

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

Mi representante en package.json

    proxy: http://127.0.0.1:5000/

Mi backend de frasco funciona en el puerto 5000 y reacciona en el puerto 3000

Una cosa a tener en cuenta es que una petición POST (de <form>) se envía al servidor backend y puedo recuperar el contenido de la petición POST en un frasco. Es la petición GET fetchque no funciona.

Estructura del directorio:

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

Aquí getcodeestá el directorio de la aplicación del frasco y getcode-clientcontiene la aplicación React creada usando create-react-app

NOTA: También intenté configurar un proxy manual como este: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

pero ahora la aplicación de reacción no se muestra. Muestra completamente la salida json de mi matraz

python reactjs flask fetch

Publicado el 12/05/2020 a las 12:30
fuente por usuario Code Yard

En otros idiomas...

2 respuestas

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

Ya que estás usando CRA te sugiero que uses su configuración de proxy.

Para decirle al servidor de desarrollo que haga proxy de cualquier petición desconocida a su servidor API en desarrollo, añada un campo proxy a su paquete.json, por ejemplo:

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

En su caso, esto será en el puerto 5000.

Aquí hay más información sobre el tema.

Sin embargo, en producción le sugeriría usar nginx o apache para evitar problemas en el futuro.

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

votos

0

No estoy seguro, pero creo que el problema es que al usar React and Flask en el host local, y no especificar el puerto en las fetchsolicitudes, intenta esto:

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

Respondida el 15/05/2020 a las 10:49
fuente por usuario Dex