내 FastAPI 쿠키가 내 React 프런트엔드에 도달하지 못하는 이유는 무엇입니까?

React 프론트엔드의 FastAPI 쿠키 문제

문제

FastAPI는 POST 요청을 실행하고 관찰에도 불구하고 React 프론트엔드에 쿠키를 반환하지 않습니다. DevTools를 사용하여 응답 헤더의 쿠키 Chrome.

솔루션

문제를 해결하려면 다음 단계를 따르세요.

1. Axios 요청 확인:

   Axios POST 요청이 성공적으로 수행되고 오류가 반환되지 않는지 확인하세요. 또한 응답에 상태 코드 200과 함께 'status': 'success'가 포함되어 있는지 확인하세요.

2. Axios 요청에 자격 증명 설정:

   React 프론트엔드와 FastAPI 백엔드는 서로 다른 포트를 사용하므로 교차 출처 요청이 이루어집니다. 쿠키 전송을 활성화하려면 Axios 요청에서 withCredentials 속성을 true로 설정하세요:

   await axios.post(url, data, {withCredentials: true}))

3. FastAPI 미들웨어에서 자격 증명 허용:

   교차 출처 요청의 경우 FastAPI 미들웨어에서 자격 증명을 명시적으로 허용하세요. CORSMiddleware를 사용하여 Allow_credentials=True를 설정합니다. 그러면 Access-Control-Allow-Credentials 응답 헤더가 true로 설정됩니다.

4. 허용되는 출처 지정:

   지정 * 와일드카드를 제외하고 ORIGINS를 사용하여 허용되는 출처입니다. 이렇게 하면 특정 도메인만 쿠키를 보낼 수 있습니다.

5. 쿠키 HTTPOnly 설정:

   FastAPI 코드에서 httponly 매개변수를 다음으로 설정합니다. 쿠키를 설정할 때 true입니다. 이렇게 하면 JavaScript가 쿠키에 액세스하는 것을 방지하여 보안을 강화할 수 있습니다.

6. CORS 미들웨어 구성:

   CORSMiddleware를 FastAPI 앱에 추가하고 다음과 같이 구성합니다. React 프론트엔드에서 사용하는 오리진을 허용하고, 자격 증명을 허용하고, 모든 메서드와 headers.

7. 브라우저 설정 확인(로컬 호스트 테스트 전용):

   localhost를 통해 React 프론트엔드에 액세스하는 경우 Axios POST 요청이 다음을 사용하는지 확인하세요. URL의 '127.0.0.1' 대신 'localhost'(다른 것으로 간주됨)

이러한 단계를 구현하면 FastAPI는 쿠키를 React 프런트엔드에 올바르게 반환하여 프런트엔드와 백엔드 간의 안전하고 인증된 통신을 가능하게 합니다.

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