Mi primer error de CORS en FastAPI

Aprendo construyendo. Construí un rastreador de gastos. Usé FastAPI para el backend. Usé HTML y JavaScript para el frontend.

El servidor arrancó. Swagger UI funcionaba. La página HTML falló. El botón "Cargar gastos" no hacía nada.

Revisé mi código Python. Revisé mi solicitud fetch. Nada parecía estar mal.

Abrí la consola del navegador. Vi un error en rojo. CORS bloqueó la solicitud.

El frontend usaba el puerto 3000. El backend usaba el puerto 8000. El navegador detectó orígenes diferentes. Bloqueó la conexión.

Añadí CORSMiddleware a mi código de FastAPI. Permití el origen http://127.0.0.1:3000. El error desapareció.

Lecciones para ti:

Fuente: https://dev.to/bynilotpal/my-first-cors-error-in-fastapi-2hf6