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

FastAPI가 React 프런트엔드에 쿠키를 반환하지 않는 이유

React 프런트엔드 내 FastAPI 백엔드에서 쿠키를 검색하려고 할 때 다음과 같은 오류가 발생할 수 있습니다. 실제로 응답에서 예상되는 쿠키를 수신합니다. 적절한 쿠키 생성, 자격 증명 전송 구성, 올바른 CORS(Cross-Origin Resource Sharing) 설정 등 여러 요소가 이 동작에 영향을 미칩니다.

쿠키를 올바르게 설정

기본적으로 FastAPI는 응답으로 쿠키를 자동으로 반환하지 않습니다. 쿠키를 설정하려면 응답 개체의 set_cookie() 함수를 명시적으로 호출하고 키, 값 및 추가 옵션(예: max_age 또는 만료)을 지정해야 합니다. Axios POST 요청 중에 오류가 없고 상태 코드 200으로 성공적인 응답을 받았는지 확인하세요.

자격 증명 전송

React 프런트엔드에서 쿠키를 받으려면 Axios 요청 내에서 자격 증명 전송을 활성화해야 합니다. withCredentials 속성을 true로 설정하면 요청에서 쿠키 및 인증 헤더와 같은 자격 증명을 보내고 받을 수 있습니다. 이 속성은 서버로부터 자격 증명을 받을 것으로 예상되는 모든 요청에 ​​포함되어야 합니다.

또한 CORS 요청의 경우(프런트엔드와 백엔드가 서로 다른 도메인이나 포트를 사용하는 경우) CORS 구성은 자격 증명 전송을 명시적으로 허용해야 합니다. . 이는 CORSMiddleware에서 Allow_credentials 옵션을 True로 설정하여 달성할 수 있습니다.

CORS 구성

CORS 설정은 원본 간 요청을 허용하고 프런트엔드와 백엔드 간의 쿠키 전송을 활성화하는 데 중요한 역할을 합니다. . FastAPI 애플리케이션에 CORS 미들웨어가 구성되어 있고, allowed_origins 목록에 React 프런트엔드의 원본이 포함되어 있는지 확인하세요.

적절한 Axios 구성

Axios 요청에는 true로 설정된 withCredentials 옵션이 포함되어야 합니다.
await axios.post(url, data, { withCredentials: true })

또는 Fetch API를 사용하는 경우:
fetch('https://example.com', { 자격 증명: 'include' })

다음 단계를 따르면 FastAPI 백엔드와 React 프론트엔드 사이에서 쿠키를 성공적으로 설정하고 검색할 수 있으므로 인증된 사용자 처리 및 액세스 제어가 가능합니다.

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