Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Mengapa Bahagian Depan React Saya Tidak Memaparkan Respons POST daripada Bahagian Belakang FastAPI Saya?

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

Susan Sarandon
Susan Sarandonasal
2024-11-12 12:17:02613semak imbas

Why Isn't My React Frontend Displaying POST Response from My FastAPI Backend?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn