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

FastAPI: 쿠키를 React 프런트엔드에 반환할 수 없음

FastAPI가 React 프런트엔드에 쿠키를 반환하지 못할 때 문제가 발생합니다.

코드:

아래 Python 스니펫은 쿠키 설정을 위한 FastAPI 코드를 보여줍니다.

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)):
    # code to authenticate and generate access token
    
    # set cookie
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    
    return {"status": "success"}

React 프런트엔드에서 Axios를 사용하여 요청:

await axios.post(login_url, formdata)

문제 해결:

1. 쿠키 생성 확인:

   • Axios POST 요청이 성공하고 '상태'를 반환하는지 확인하세요. 200 상태 코드의 '성공' 응답.

2. Axios 요청에서 자격 증명 활성화:

   • Credentials로 설정: true 다음을 포함한 자격 증명 수신을 허용하는 Axios 요청에서 쿠키.

3. CORS 구성:

   • FastAPI(백엔드)와 React( 프론트엔드), FastAPI에서 CORS를 활성화하여 허용되는 원본을 지정하세요. 자격 증명 전송 및 수신을 허용하려면 allowed_credentials=True를 설정합니다.

4. 허용되는 출처 지정:

   • CORS 구성에서, React에 허용되는 출처를 지정하세요. frontend.

수정된 Axios 요청:

await axios.post(login_url, formdata, {withCredentials: true})

추가 고려 사항:

• 동일 도메인: 백엔드와 프런트엔드가 모두 동일한 도메인을 사용하고 있는지 확인하세요. localhost와 127.0.0.1을 다른 도메인으로 사용하면 쿠키 공유가 방지됩니다.
• 명시적 쿠키 설정: FastAPI response.set_cookie() 함수는 응답에 쿠키를 명시적으로 설정합니다.
• 자격 증명에는 다음이 포함됩니다. 자격 증명이 다음과 같은 경우 브라우저는 교차 원본 요청에 자격 증명을 포함합니다. 'include'는 fetch() 또는 withCredentials에 지정되어 있습니다. Axios에서는 true입니다.

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