Rumah > pembangunan bahagian belakang > Tutorial Python > Mengapa Apl Reaksi Saya Tidak Memaparkan Data JSON daripada Bahagian Belakang FastAPI Saya?

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

Susan Sarandon
Lepaskan: 2024-11-10 04:16:02
asal
236 orang telah melayarinya

Why Isn't My React App Displaying JSON Data from My FastAPI Backend?

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=["*"],
)
Salin selepas log masuk

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!

Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan