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

React UI가 FastAPI 백엔드의 POST 응답을 표시하지 않음

이 시나리오에서 React UI는 FastAPI에서 JSON 파일을 가져올 것으로 예상됩니다. 백엔드는 "localhost:8000/todo"에 있고 데이터는 "localhost:3000"에 UI의 일부로 표시됩니다. 그러나 JSON 파일의 두 항목("책을 읽으세요." 및 "시내를 순환하세요.")이 표시되지 않습니다.

문제 근본 원인:

문제는 FastAPI 백엔드에 CORS(Cross-Origin Resource Sharing) 구성이 부족하다는 것입니다. CORS는 한 출처의 리소스를 다른 출처의 리소스와 공유할 수 있게 해주는 메커니즘입니다. 이 경우 React UI와 FastAPI 백엔드가 서로 다른 도메인에서 실행되기 때문에 필요합니다.

해결책:

FastAPI 백엔드에서 CORS를 활성화하려면 CORSMiddleware를 구성해야 합니다. 이 미들웨어를 사용하면 백엔드 액세스가 허용되는 원본, 허용되는 메서드 및 헤더, 자격 증명 허용 여부를 지정할 수 있습니다.

구현 예:

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://localhost:3000"이라는 두 원본의 요청을 허용하도록 구성되었습니다. "http://127.0.0.1:3000." 또한 모든 메소드와 헤더를 허용하고 자격 증명 공유를 활성화합니다.

참고:

원본은 프로토콜, 도메인 및 포트의 조합을 참조한다는 점을 기억하는 것이 중요합니다. . 따라서 포트가 다른 localhost URL이라도 원본이 다른 것으로 간주되므로 CORS 구성이 필요합니다.

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