Aplikasi React gagal memaparkan data JSON yang diambil daripada backend FastAPI di localhost: 8000/todo. Data diterima tetapi tidak dipaparkan dalam UI React.
Isu ini disebabkan oleh kekurangan konfigurasi Perkongsian Sumber Silang (CORS) dalam bahagian belakang FastAPI. Secara lalai, penyemak imbas mengehadkan permintaan silang asal untuk mengelakkan risiko keselamatan.
Untuk menyelesaikan isu ini, CORS mesti didayakan dalam aplikasi FastAPI. Ini boleh dicapai menggunakan CORSMiddleware.
Kod berikut menunjukkan cara mendayakan CORS dalam aplikasi FastAPI:
from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware app = FastAPI() origins = ["http://localhost:3000", "http://127.0.0.1:3000"] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"], )
CORSMiddleware membenarkan permintaan silang asal daripada asal yang ditentukan (http://localhost:3000 dan http://127.0.0.1:3000 dalam contoh ini). Ia juga membenarkan kuki disertakan dalam permintaan (allow_credentials=True) dan tidak menyekat kaedah HTTP atau pengepala (allow_methods=["*"], allow_headers=["*"]).
Atas ialah kandungan terperinci Mengapa Apl Reaksi Saya Tidak Memaparkan Data JSON daripada Bahagian Belakang FastAPI Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!