1

estoy intentando crear una aplicación empleando Python como server y React como frontend. De momento solo estoy haciendo pruebas con una devolución de datos sencilla pero no consigo recibir datos con el GET.

El servidor es el siguiente:

from flask import Flask, json
from flask import Response
from flask_restful import Api, Resource, reqparse

app = Flask(__name__)
api = Api(app)


class User(Resource):
    @app.route('/logs/', methods = ['GET'])
    def get():
        data = { "id": 1, "name": "Apples",  "price": "$2" }
        js = json.dumps(data)

        resp = Response(js, status=200, mimetype='application/json')
        return resp


api.add_resource(User, "/logs/")

app.run(debug=True)

Y el frontend es:

import React, {Component} from 'react';
import axios from 'axios';
import './App.css'

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {
    axios.get('/logs/')
      .then(res => res.text())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {items}
        </ul>
      );
    }
  }
}
export default MyComponent;

Al ejecutar la aplicación React me aparece un error 404, Cannot Get.

He probado ha utilizar fetch en vez de axios pero me aparece otro error, me devuelve un HTML en vez del json.

Además me han comentado que a lo mejor es necesario, en el proyecto react, que declaro la IP del localhost en la que se lanza mi servidor, en que lugar debería hacerlo si es que es necesario?

La aplicación react la he creado con el comando propio de react.

Gracias.

1 respuesta 1

0

Viendo el codigo que has publicado te explico un par de cosas tanto de la api(Flask) como de React

  1. Flask por defecto trabaja en el puerto 5000 y eso no lo tienes en cuenta en el lado del cliente

  2. Le estas pasando mal la url al axios.

  3. Axios guarda los datos recuperados en la clave data

En caso que quieras usar la api en otro puerto, se lo puedes pasar como parametro al metodo run

app.run(debug=True, port=5001) 

Respecto a React, tal cual como tienes puesta la url para axios, la url final seria esta.

http[s]://dominio_o_ip:[puerto]/logs/

Realmente esa url esta mal, ya que no existe ningun recurso con esa url.

Para arreglarlo puedes hacer dos cosas.

  1. Definir baseURL en axios
  2. Pasar la url completa

Para el segudo caso, tu codigo quedaria asi.

componentDidMount() {
  axios.get("http://localhost:5000/logs/").then(res => res.data).then(result => {
    this.setState({
      isLoaded: true,
      items: result
    });
  }, error => {
    this.setState({
      isLoaded: true,
      error
    });
  });
}

Fijate que ahora no es resp.text().

Espero que te sirva de ayuda.

Un saludo.

2
  • Muchas gracias por la ayuda. El problema era fallo de concepto por mi parte. Había leído que al ser localhost no se debía poner la IP:PUERTO pero al probar con tus consejos he visto que el problema era del CORS. Finalmente ya me funciona, gracias!!
    – Luis
    Commented el 29 may. 2019 a las 9:03
  • Eso significa que te ha funcionado?
    – MitaCloud
    Commented el 29 may. 2019 a las 14:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.