내 FastAPI 백엔드가 내 React 프런트엔드로 쿠키를 보내지 않는 이유는 무엇입니까?

FastAPI는 React 프런트엔드에 쿠키를 보낼 수 없습니다

개요

FastAPI는 API 생성에 널리 사용되는 Python 프레임워크입니다. 그러나 일부 사용자는 FastAPI가 React 프런트엔드 애플리케이션에 쿠키를 반환하지 않는 문제를 보고했습니다.

문제

FastAPI가 React 프런트엔드 앱에 쿠키를 반환하지 않는 이유는 무엇입니까?

코드 예

다음은 문제:

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)) -> dict:
    # Database operations omitted for brevity
    access_token = create_access_token(data={"sub": user.mobile_number})
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    return {"status": "success"}

Swagger UI에서 로그인 요청을 보낼 때 쿠키가 응답 헤더에 나타납니다. 그러나 React 앱에서는 쿠키가 반환되지 않습니다.

해결 방법

이 문제를 해결하려면 두 단계가 있습니다.

1. 설정 올바른 쿠키:

   • 다음에 오류가 없는지 확인하세요. FastAPI 요청 및 성공 응답을 받았습니다.
   • response.set_cookie(...)를 사용하여 쿠키를 올바르게 설정합니다.

2. CORS를 구성하고 자격 증명:

   • 출처를 설정하여 CORS 요청을 허용하고 CORSMiddleware에서 Allow_credentials=True.
   • React 앱에서 쿠키 전송을 위한 Axios 요청에서 withCredentials: true를 설정합니다.

설명

1. 쿠키 설정:

   • FastAPI 응답에서 쿠키가 올바르게 설정되었는지 확인하세요. 올바른 키, 값, httponly 및 기타 관련 매개변수가 설정되었는지 확인하세요.

2. 교차 원본 리소스 공유(CORS):

   • React와 FastAPI가 서로 다른 포트에 있으므로 CORS 요청이 made.
   • CORS를 사용하여 쿠키를 허용하려면 서버가 Access-Control-Allow-Origin 응답 헤더를 통해 특정 출처를 허용해야 합니다.
   • FastAPI에서는 make_credentials=True와 함께 CORSMiddleware를 사용하세요.

3. 자격증명 요청:

   • React에서 Axios 요청에 withCredentials: true를 설정합니다.
   • 이는 FastAPI 서버에 대한 후속 요청에서 쿠키를 보내도록 브라우저에 알립니다.

중요 참고

쿠키에 대한 무단 접근을 방지하려면 허용된 출처를 명시적으로 지정하세요. 기본적으로 쿠키를 제외하고 자격 증명 없이 CORS 요청에서는 특정 통신 유형만 허용됩니다.

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