ข้อผิดพลาด CORS ครั้งแรกของผมใน FastAPI

ผมเรียนรู้จากการลงมือทำ ผมสร้างแอปติดตามค่าใช้จ่าย ผมใช้ FastAPI สำหรับ backend ผมใช้ HTML และ JavaScript สำหรับ frontend

เซิร์ฟเวอร์เริ่มทำงาน Swagger UI ใช้งานได้ปกติ แต่หน้า HTML ใช้งานไม่ได้ ปุ่ม Load Expenses ไม่ทำงาน

ผมเช็คโค้ด Python ของผม ผมเช็ค fetch request ของผม ไม่มีอะไรดูผิดปกติเลย

ผมเปิด browser console แล้วก็เห็นข้อผิดพลาดสีแดง CORS บล็อก request

frontend ใช้ port 3000 backend ใช้ port 8000 เบราว์เซอร์มองว่าเป็นคนละ origin กัน มันจึงบล็อกการเชื่อมต่อ

ผมเพิ่ม CORSMiddleware ลงในโค้ด FastAPI ผมอนุญาต origin http://127.0.0.1:3000 แล้วข้อผิดพลาดก็หายไป

บทเรียนสำหรับคุณ:

ที่มา: https://dev.to/bynilotpal/my-first-cors-error-in-fastapi-2hf6