Mengapa bahagian hadapan React saya tidak memaparkan data POST daripada bahagian belakang FastAPI saya?

React not display POST response from FastAPI backend: Troubleshooting CORS

Dalam isu ini, React frontend tidak dapat memaparkan data yang DIPOS daripada Bahagian belakang FastAPI. Isunya terletak pada sekatan CORS (Cross-Origin Resource Sharing), yang perlu dikonfigurasikan pada bahagian belakang FastAPI.

CORS dan FastAPI

CORS ialah mekanisme yang menyekat permintaan silang asal, seperti yang daripada bahagian hadapan React kepada bahagian belakang FastAPI. Ini dilakukan untuk mengurangkan risiko keselamatan dan melindungi data pengguna. Untuk mendayakan CORS, anda perlu mengkonfigurasi aplikasi FastAPI untuk membenarkan permintaan daripada asal bahagian hadapan.

Mengkonfigurasi CORS dalam FastAPI

Salah satu cara yang disyorkan untuk mendayakan CORS dalam FastAPI ialah melalui CORSMiddleware. Berikut ialah contoh:

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

Dengan menambahkan perisian tengah ini, anda membenarkan permintaan daripada asal yang ditentukan (dalam kes ini, localhost:3000) dan memberikan kebenaran untuk kuki, kaedah dan pengepala.

Menyelesaikan isu

Untuk menyelesaikan isu, pastikan bahagian belakang FastAPI mempunyai CORS dikonfigurasikan seperti yang ditunjukkan di atas. Setelah CORS didayakan, bahagian hadapan React seharusnya dapat berkomunikasi dengan bahagian belakang dan memaparkan data yang diterima daripada permintaan POST.

Atas ialah kandungan terperinci Mengapa bahagian hadapan React saya tidak memaparkan data POST daripada bahagian belakang FastAPI saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!