내 React 프런트엔드가 FastAPI 백엔드의 POST 응답을 표시하지 않는 이유는 무엇입니까?

React가 FastAPI 백엔드의 POST 응답을 표시하지 않음: CORS 문제 해결

React에서 HTTP에서 JSON 데이터를 검색하려고 합니다. 다른 포트에서 실행되는 FastAPI 백엔드에 대한 POST 요청입니다. 그런데 프런트엔드가 예상한 대로 응답을 렌더링하지 않습니다.

CORS 이해

그 이유는 CORS(Cross-Origin Resource Sharing) 때문입니다. CORS는 브라우저가 프로토콜, 도메인 및 포트에 의해 정의된 다양한 출처의 리소스(예: JSON 데이터)에 요청을 보내는 것을 제한하는 보안 메커니즘입니다. 귀하의 경우, 프런트엔드(localhost:3000)는 다른 출처인 백엔드(localhost:8000)의 리소스에 액세스하려고 합니다.

FastAPI에서 CORS 활성화

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

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
)

"YOUR_FRONTEND_ORIGIN"을 React 프런트엔드의 원본(일반적으로 "http://localhost:3000")으로 바꿉니다. 이렇게 하면 백엔드가 CORS 오류 없이 프런트엔드의 POST 요청에 응답할 수 있습니다.

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