Mengapa UI React Saya Tidak Memaparkan Respons POST daripada Bahagian Belakang FastAPI?

UI React Tidak Memaparkan Respons POST daripada FastAPI Backend

Dalam senario ini, UI React dijangka akan mengambil fail JSON daripada FastAPI belakang di "localhost:8000/todo" dan tunjukkan data sebagai sebahagian daripada UI di "host tempatan:3000." Walau bagaimanapun, dua item daripada fail JSON ("Baca buku." dan "Kitaran sekitar bandar.") tidak dipaparkan.

Punca Punca Isu:

Isunya terletak pada kekurangan konfigurasi Perkongsian Sumber Silang (CORS) dalam bahagian belakang FastAPI. CORS ialah mekanisme yang membenarkan sumber daripada satu asal dikongsi dengan sumber daripada asal yang lain, yang diperlukan dalam kes ini kerana UI React dan bahagian belakang FastAPI dijalankan pada domain yang berbeza.

Penyelesaian:

Untuk mendayakan CORS dalam bahagian belakang FastAPI, CORSMiddleware mesti dikonfigurasikan. Perisian tengah ini membenarkan menentukan asal-usul yang dibenarkan untuk mengakses bahagian belakang, kaedah dan pengepala dibenarkan dan sama ada bukti kelayakan dibenarkan.

Contoh Pelaksanaan:

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=["*"],
)

Dalam contoh ini, CORSMiddleware dikonfigurasikan untuk membenarkan permintaan daripada dua asal: "http://localhost:3000" dan "http://127.0.0.1:3000." Selain itu, ia membenarkan semua kaedah dan pengepala serta mendayakan perkongsian bukti kelayakan.

Nota:

Adalah penting untuk diingat bahawa asal merujuk kepada gabungan protokol, domain dan port . Oleh itu, walaupun URL hos tempatan dengan port berbeza dianggap asal yang berbeza dan memerlukan konfigurasi CORS.

Atas ialah kandungan terperinci Mengapa UI React Saya Tidak Memaparkan Respons POST daripada Bahagian Belakang FastAPI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!