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

Publicado el 12/05/2020 a las 12:30
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

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.

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

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

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