0

Estoy tratando de hacer una API en Flask la cual solo llamará a procedimientos almacenados que ya están en una base de datos en MySQL.

Código de la interfaz en ReactJs:

import { useEffect, useState } from "react";
import { Link, useNavigate  } from "react-router-dom";  
import Api from "../src/componentes/servicios/api"; //--Aquí está la URL: const api="http://127.0.0.1:4500/tsql/"; export default api;


const Ejemplo = () => { 
    
    const[nom,nombresusernfchange]=useState("");
    const[apellido,apellidochange]=useState(""); 

    const navigate=useNavigate();

    

    const enviarDatos=(e)=>{
      e.preventDefault(); 

      try {  
        
        
        const params={ Accion:"Consultar", Nom:nom, apellido:md5(clave_user, 10) }; 

        console.log(params);
        fetch(Api,{
                    method:"POST",
                    body:JSON.stringify(params) 
                    
        })
        .then(respuesta=>respuesta.json())
        .then((datosRespuesta)=>{     
            console.log(datosRespuesta); 
             switch (datosRespuesta) {

                                      
                
                case "Sin éxito": 
                     alert(datosRespuesta);                                                                                                  
                break;  
                
                case "El parámetro de Acción, está nulo.": 
                     alert(datosRespuesta); 
                break;
                
                default:
                      //-- Aquí muestra datos de regreso de prueba
                break;

              } 
              
              console.log(datosRespuesta); 
         }
        )
        .catch(console.log)       
     
} catch (error) {
alert(error);
}  
      
}
    return ( 
        <div className="card">
        <div className="card-header">
            Login del Sistema
        </div>
        <div className="login templete d-flex justify-content-center align-items-center 100-w 100-vh">
            <div className="50-w p-5 rounded bg-white">
                            <form   id="webFrmLoginsistema"  onSubmit={enviarDatos} > 
                                        <div   className="mb-2">
                                            <label htmlFor="">Nombre:</label>
                                            <input type="text"  value={nom || ""}  onChange={e=>nombresusernfchange(e.target.value)}   name="txtnomuser" id="txtnomuser" className="form-control" aria-describedby="helpId" size={50}  placeholder="Teclea el nombre de usuario" required ></input>                             
                                        </div>                         
                                        <div   className="mb-2">
                                            <label htmlFor="">Contraseña:</label>
                                            <input type="text"   value={apellido || ""} onChange={e=>apellidochange(e.target.value)}   name="txtclave" id="txtclave" className="form-control" aria-describedby="helpId" size={50}  placeholder="Teclea contraseña" required></input>                             
                                        </div>                  
                                        <div   className="fa fa-align-center" >
                                            <span className="fa fa-align-center" >                                        
                                                <button className="btn btn-success"   type="submit" aria-label="">Acceder</button>
                                                &nbsp;
                                                <Link to={"/Home"} className="btn btn-danger" type="button" aria-label="">Cancelar</Link>                              
                                            </span>                                    
                                        </div>                              
                            </form> 
            </div>                            
        </div>                
     </div>
     );
}
 
export default Ejemplo;

Flask:

from flask import Flask, request, jsonify
from flask_cors import CORS, cross_origin
from flask_mysqldb import MySQL

#Se arranca el servidor
app=Flask(__name__)
cors=CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'
CORS(app, resources={r"/tsql/*": {"origins":"http://127.0.0.1:4500/tsql/"}})

#Conexión MySQL
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'clave'
app.config['MYSQL_DB'] = 'pruebadb'
mysql=MySQL(app)


#Iniciar sesión, Settings
app.secret_key='mysecretkey'


@app.route('/')
def Index():
    return jsonify('Flask: API Python') 

@cross_origin
@app.route('/tsql/', methods=['POST'])
def login():
    if request.method== 'POST':
        accion=request.args.get("Accion")
        no=request.args.get("Nom")
        ape=request.args.get("apellido")

        if accion is None:
           print("Acción NULA")

        if no is None:
           print("Nombre  NULA")

        if ape is None:
           print ("Apellido  NULA")


        #respuesta=accion+usuario+clave
        cursor=mysql.connection.cursor()
        sql="CALL SP_Validarsifunciona({%s}, {%s})", (no, ape)
        cursor.execute(sql)    
        respuesta=cursor.fetchall() 

        if respuesta is None:
             return jsonify("Sin éxito")
        else:
            return jsonify(respuesta)

    

def pagina_no_encontrada(error):
    return "<h1>Página o servicio que intenta buscar, no existe.</h1>", 404

if __name__== '__main__':
    app.run(port=4500, debug=True)

El objetivo de "Accion" es ejecutar X Acción en la API para que llame un SP que pueda necesitar.

El problema, es que por alguna razón cuando ejecuto el llamado desde ReactJs me marca el siguiente error:

TypeError: Failed to fetch
    at enviarDatos (main.a95edca77889032c326a.hot-update.js:52:7)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1

Y no, los datos no van nulos porque los veo en la consola:

{Accion: 'EjecutarX', Nom: 'algo', apellido: 'algo'}
 

Y esto me marca en la consola de Flask:

Acción NULA
Nombre  NULA
Apellido  NULA
127.0.0.1 - - [04/Sep/2023 20:29:42] "POST /tsql/ HTTP/1.1" 500 -
Traceback (most recent call last):
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2213, in __call__
    return self.wsgi_app(environ, start_response)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2193, in wsgi_app
    response = self.handle_exception(e)
               ^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2190, in wsgi_app
    response = self.full_dispatch_request()
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1486, in full_dispatch_request
    rv = self.handle_user_exception(e)
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1484, in full_dispatch_request
    rv = self.dispatch_request()
         ^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1469, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\src\app.py", line 48, in login
    cursor.execute(sql)
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\MySQLdb\cursors.py", line 178, in execute
    assert isinstance(mogrified_query, (bytes, bytearray))
AssertionError

Francamente, no tengo idea porque están llegando nulos los datos a la API. Es obvio, que no salen bien. Entonces, si es el caso:

  • ¿Cuál es la manera correcta de consumir esa API en Flask en ReactJs?
  • ¿Cuál es la forma correcta de tomar esos datos en la API Flask?

No soy experto en Flask y menos en Python. Pero estoy intentando explorar ese nuevo mundo para mí. Además he visto tutoriales en Youtube, pero, unos en los parámetros ponen:

            accion=request.json["Accion"]
            no=request.json["Nom"] 
            ape=request.json["apellido"]

Pero, tampoco me funciona. De hecho, si llamo a un SP que no use parámetros (que solo liste) si trae los datos hasta la interfaz, puedo ver el JSON sin problemas.

¿Alguien puede ayudarme con esto?.

Gracias y saludos.

Nota: Entiendo, que estas líneas de código:

app.config['CORS_HEADERS'] = 'Content-Type'
CORS(app, resources={r"/tsql/*": {"origins":"http://127.0.0.1:4500/tsql/"}})

Se supone que permiten el acceso a los parámetros y dan los permisos para recibir datos. No sé, si es redundante lo que estoy haciendo, o bien, es correcto.

Gracias y saludos.

Pips utilizados:

python -m venv env
call env/scripts/active
pip install flask
pip install flask-mysqldb
pip install Flask-Cors

Tambien, use Thunder Client marca lo siguiente:

Acción NULA
Nombre  NULA
Apellido  NULA
127.0.0.1 - - [04/Sep/2023 20:29:42] "POST /tsql/ HTTP/1.1" 500 -
Traceback (most recent call last):
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2213, in __call__
    return self.wsgi_app(environ, start_response)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2193, in wsgi_app
    response = self.handle_exception(e)
               ^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2190, in wsgi_app
    response = self.full_dispatch_request()
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1486, in full_dispatch_request
    rv = self.handle_user_exception(e)
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1484, in full_dispatch_request
    rv = self.dispatch_request()
         ^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1469, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\src\app.py", line 48, in login
    cursor.execute(sql)
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\MySQLdb\cursors.py", line 178, in execute
    assert isinstance(mogrified_query, (bytes, bytearray))
AssertionError
127.0.0.1 - - [04/Sep/2023 20:44:57] "POST /tsql/?Accion=Algo&Nom_user=smgc&Clav=202cb962ac59075b964b07152d234b70 HTTP/1.1" 500 -
Traceback (most recent call last):
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2213, in __call__
    return self.wsgi_app(environ, start_response)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2193, in wsgi_app
    response = self.handle_exception(e)
               ^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 2190, in wsgi_app
    response = self.full_dispatch_request()
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1486, in full_dispatch_request
    rv = self.handle_user_exception(e)
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function     
    return cors_after_request(app.make_response(f(*args, **kwargs)))
                                                ^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1484, in full_dispatch_request
    rv = self.dispatch_request()
         ^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\flask\app.py", line 1469, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\wamp64\www\Phyton\Flask\API\src\app.py", line 48, in login
    cursor.execute(sql)
  File "C:\wamp64\www\Phyton\Flask\API\env\Lib\site-packages\MySQLdb\cursors.py", line 178, in execute
    assert isinstance(mogrified_query, (bytes, bytearray))
AssertionError
127.0.0.1 - - [04/Sep/2023 20:44:58] "GET /tsql/?__debugger__=yes&cmd=resource&f=debugger.js HTTP/1.1" 304 -
127.0.0.1 - - [04/Sep/2023 20:44:58] "GET /tsql/?__debugger__=yes&cmd=resource&f=style.css HTTP/1.1" 304 -
127.0.0.1 - - [04/Sep/2023 20:44:58] "GET /tsql/?__debugger__=yes&cmd=resource&f=console.png HTTP/1.1" 304 -

1
  • Por favor, utiliza snippets solo cuando el código pueda ser ejecutable en la pregunta misma (si es HTML/CSS/JS). Para dar formato al código, agrega triples acentos graves (```) una línea antes y una después de cada bloque. Además, para dar formato a los mensajes de error, antepón ">" en la primera línea del error, para darle formato de cita.
    – padaleiana
    Commented el 5 sept. 2023 a las 13:39

1 respuesta 1

0

Para que Flask tome los datos de un arreglo JSON que venga de una interfaz que no este dentro del mismo proyecto hay que hacer lo siguiente:

@cross_origin
@app.route('/tsql/', methods=['POST'])
def tsql():
    if request.method== 'POST': 
       parametros=request.get_json('paramateros') #Se toman los parámetros que vienen del FE en JSON {'Accion:''HacerX', 'Nombre:''X',' Apellido:''X'}
       accion=parametros['Accion']#Se toma el valor dentro del vector como se llame
       Nom=parametros['Nombre']#Se toma el valor dentro del vector como se llame
       Apellido=parametros['Apellido']#Se toma el valor dentro del vector como se llame 
       
       #Manipular los datos según sea el caso
       
    return jsonify("algo")

Se que esto puede ser "ridículo" para alguien que ya tiene el conocimiento, pero, para un novato como el presente es el primer paso para iniciar hacer una API en un Framework.

Espero, que esto sea de utilidad para alguien. Gracias.

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.