es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de CORS localhost usando Flask y React.

10 Jun, 2023 Programación

Estoy teniendo algunos problemas con el desarrollo de mi aplicación React. En el lado del cliente, estoy usando Axios para hacer las solicitudes a la API (Flask).

El problema es que a menudo obtengo un error de CORS solo cuando envío la solicitud a la API en localhost. Tengo la misma API funcionando en Heroku sin ningún error.

Ruta API = http://127.0.0.1:5000

Ruta cliente = http://localhost:3000/#/

Código del cliente:

const endpoint = process.env.REACT_APP_ENDPOINT;
// Fetch API data
const [data, setData] = useState([{}]);
useEffect(() => {
axios.get(endpoint + “/api/rooms”)
.then((data) => {
console.log(“Se recuperaron los datos del punto de API de enlace.”);
if (data[200] !== “No Rooms”) {
setData(data);
}
}).catch((err) => {
console.error(err.message);
console.log(“No se recuperaron habitaciones del punto final de la API.”);
});
}, [endpoint]);

Código del servidor (Python):

import os
from flask import Flask
from flask_socketio import SocketIO
from flask_cors import CORS, cross_origin
from dotenv import load_dotenv
from app_modules.util.rooms import Rooms

load_dotenv()

app = Flask(name, static_folder=”/client/build”)
app.config[‘SECRET_KEY’] = os.getenv(“app_key”)
app.config[‘CORS_HEADERS’] = “Content-Type”
ALLOWED_ORIGINS = os.getenv(“ALLOWED_ORIGINS”)

cors = CORS(app, resources={“/*”: {“origins”: ALLOWED_ORIGINS}}, support_credentials=True)

socketio = SocketIO(app,
cors_allowed_origins=ALLOWED_ORIGINS,
logger=False,
engineio_logger=False,
cors_credentials=True)

rooms = Rooms()

@app.route(‘/api/rooms’)
@cross_origin(supports_credentials=True)
def home():
return {“rooms”: rooms.secure_api} if rooms.secure_api else {“200”: “No Rooms”}

Nota:
ALLOWED_ORIGINS = *

Pero sigo obteniendo este error:

Error de consola

Resultado de la consola de red.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás teniendo un error CORS al hacer solicitudes a tu API Flask desde tu aplicación React que se ejecuta en localhost. Una solución es habilitar CORS (Compartir Recursos en Orígenes Cruzados) en tu aplicación Flask.

    En tu código Python, ya estás usando la extensión Flask-CORS:

    cors = CORS(app, resources={"/*": {"origins": ALLOWED_ORIGINS}}, support_credentials=True)

    Esto debe permitir solicitudes desde todos los orígenes (“/*”) y admitir credenciales, lo que es necesario cuando se usan cookies, tokens u otros mecanismos de autenticación.

    Sin embargo, parece que el parámetro “allowed_origins” en tu instancia de SocketIO no está configurado correctamente. Tienes:

    socketio = SocketIO(app,
                    cors_allowed_origins=ALLOWED_ORIGINS,
                    logger=False,
                    engineio_logger=False,
                    cors_credentials=True)

    Pero ALLOWED_ORIGINS no está definido en tu fragmento de código. Debe ser una lista de cadenas que contengan los orígenes permitidos, por ejemplo:

    ALLOWED_ORIGINS = ['http://localhost:3000']

    Asegúrate de agregar el origen correcto de tu aplicación de React, que es `http://localhost:3000` en este caso.

    Si eso aún no funciona, puedes intentar agregar el siguiente middleware de Flask para permitir todos los orígenes y configurar los encabezados CORS:

    from flask import Response

@app.after_request
def set_cors_headers(response: Response) -> Response:
    response.headers["Access-Control-Allow-Origin"] = "*"
    response.headers["Access-Control-Allow-Headers"] = "Content-Type, Authorization"
    response.headers["Access-Control-Allow-Methods"] = "GET, POST, PATCH, PUT, DELETE, OPTIONS"
    response.headers["Access-Control-Allow-Credentials"] = "true"
    return response

    Esto agregará los siguientes encabezados a la respuesta:

    Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true

    Finalmente, asegúrate de reiniciar tu servidor Flask después de hacer cambios en tu código Python.

    ¡Espero que esto ayude a resolver tu problema CORS!

Comments are closed.