Mein erster CORS-Fehler in FastAPI

Ich lerne durch das Bauen. Ich habe einen Ausgaben-Tracker gebaut. Ich habe FastAPI für das Backend verwendet. Ich habe HTML und JavaScript für das Frontend verwendet.

Der Server startete. Swagger UI funktionierte. Die HTML-Seite funktionierte nicht. Der „Load Expenses“-Button tat nichts.

Ich habe meinen Python-Code überprüft. Ich habe meinen fetch-Request überprüft. Nichts sah falsch aus.

Ich öffnete die Browser-Konsole. Ich sah einen roten Fehler. CORS blockierte die Anfrage.

Das Frontend nutzte Port 3000. Das Backend nutzte Port 8000. Der Browser sah unterschiedliche Origins. Er blockierte die Verbindung.

Ich habe CORSMiddleware zu meinem FastAPI-Code hinzugefügt. Ich habe die Origin http://127.0.0.1:3000 erlaubt. Der Fehler verschwand.

Lektionen für dich:

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