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