내 React 앱이 내 FastAPI 백엔드의 JSON 데이터를 표시하지 않는 이유는 무엇입니까?

React 애플리케이션이 FastAPI 백엔드에서 JSON 데이터를 표시하지 않음

문제

React 애플리케이션이 로컬 호스트의 FastAPI 백엔드에서 가져온 JSON 데이터를 표시하지 못합니다. 8000/todo. 데이터가 수신되었지만 React UI에서 렌더링되지 않습니다.

원인

이 문제는 FastAPI 백엔드에 CORS(Cross-Origin Resource Sharing) 구성이 부족하여 발생합니다. 기본적으로 브라우저는 보안 위험을 방지하기 위해 원본 간 요청을 제한합니다.

해결책

이 문제를 해결하려면 FastAPI 애플리케이션에서 CORS를 활성화해야 합니다. 이는 CORSMiddleware를 사용하여 달성할 수 있습니다.

예

다음 코드는 FastAPI 애플리케이션에서 CORS를 활성화하는 방법을 보여줍니다.

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

설명

CORSMiddleware는 지정된 원본(이 예에서는 http://localhost:3000 및 http://127.0.0.1:3000)의 원본 간 요청을 허용합니다. 또한 요청에 쿠키가 포함될 수 있도록 허용하고(allow_credentials=True) HTTP 메서드나 헤더를 제한하지 않습니다(allow_methods=["*"],allow_headers=["*"]).

추가 정보

• CORS 헤더: CORS 미들웨어에 의해 설정된 HTTP 헤더는 브라우저가 교차 출처 요청을 처리하는 방법을 제어합니다. 예를 들어 Access-Control-Allow-Origin 헤더는 요청에 대해 허용되는 원본을 지정합니다.
• Origin: 원본은 요청의 프로토콜, 도메인 및 포트를 나타냅니다. 다른 출처의 요청은 교차 출처 요청으로 간주됩니다.
• 동일 출처 정책: 기본적으로 브라우저는 보안 취약성을 방지하기 위해 교차 출처 요청을 제한하는 동일 출처 정책을 시행합니다. CORS는 이 정책을 완화할 수 있는 방법을 제공합니다.

위 내용은 내 React 앱이 내 FastAPI 백엔드의 JSON 데이터를 표시하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!