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

React Not Display POST Response from FastAPI Backend: Menyelesaikan Isu CORS

Dalam React, anda cuba mendapatkan semula data JSON daripada HTTP POST permintaan ke bahagian belakang FastAPI yang berjalan pada port yang berbeza. Walau bagaimanapun, bahagian hadapan tidak memberikan respons seperti yang diharapkan.

Memahami CORS

Puncanya ialah Perkongsian Sumber Silang (CORS). CORS ialah mekanisme keselamatan yang mengehadkan penyemak imbas daripada menghantar permintaan kepada sumber (seperti data JSON) daripada asal yang berbeza, yang ditakrifkan oleh protokol, domain dan port mereka. Dalam kes anda, frontend (localhost:3000) cuba mengakses sumber daripada backend (localhost:8000), yang merupakan asal yang berbeza.

Mendayakan CORS dalam FastAPI

Untuk menyelesaikan isu ini, anda perlu mendayakan CORS dalam aplikasi FastAPI anda. Ini boleh dicapai menggunakan CORSMiddleware yang dikonfigurasikan seperti berikut:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["YOUR_FRONTEND_ORIGIN"],
    allow_credentials=True,
    allow_methods=["*"],  # Allow all HTTP methods
    allow_headers=["*"],  # Allow all HTTP headers
)

Ganti "YOUR_FRONTEND_ORIGIN" dengan asal frontend React anda, biasanya "http://localhost:3000". Ini akan membolehkan bahagian belakang anda membalas permintaan POST daripada bahagian hadapan anda tanpa ralat CORS.

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