Mengapa Apl Reaksi Saya Tidak Memaparkan Data JSON daripada Bahagian Belakang FastAPI Saya?

Aplikasi React Tidak Memaparkan Data JSON dari FastAPI Backend

Masalah

Aplikasi React gagal memaparkan data JSON yang diambil daripada backend FastAPI di localhost: 8000/todo. Data diterima tetapi tidak dipaparkan dalam UI React.

Punca

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.

Penyelesaian

Untuk menyelesaikan isu ini, CORS mesti didayakan dalam aplikasi FastAPI. Ini boleh dicapai menggunakan CORSMiddleware.

Contoh

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

Penjelasan

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

Maklumat Tambahan

• Pengepala CORS: Pengepala HTTP yang ditetapkan oleh kawalan perisian tengah CORS cara penyemak imbas mengendalikan permintaan silang asal. Contohnya, pengepala Access-Control-Allow-Origin menentukan asal yang dibenarkan untuk permintaan.
• Origin: Origin merujuk kepada protokol, domain dan port permintaan. Permintaan daripada asal yang berbeza dianggap sebagai permintaan silang asal.
• Dasar Asal Sama: Secara lalai, penyemak imbas menguatkuasakan dasar asal yang sama, yang mengehadkan permintaan silang asal untuk mengelakkan kerentanan keselamatan. CORS menyediakan cara untuk melonggarkan dasar ini.

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!