Cross-Origin API 응답에서 쿠키를 설정할 수 없는 이유는 무엇입니까?

교차 원본 HTTP 쿠키 관리: 헤더 문제 해결

웹 개발 시 교차 원본 응답에서 HTTP 쿠키를 설정하고 검색하면 도전이 되십시오. 이러한 상황은 다른 도메인에서 제공되는 백엔드 API와 통신하는 프런트엔드 애플리케이션이 있을 때 발생합니다.

이 문제는 최신 브라우저에서 시행하는 동일 출처 정책에서 발생합니다. 다른 기원. 교차 출처 요청이 이루어지면 브라우저는 일반적으로 응답에서 Set-Cookie 헤더를 따르기를 거부하여 쿠키가 로컬에 저장되지 않도록 합니다.

시나리오

프런트 엔드 애플리케이션이 인증 목적으로 새로 고침 토큰을 설정해야 하는 특정 사례를 고려하십시오. 백엔드 API가 예상대로 Set-Cookie 헤더를 보내고 있지만 프런트엔드에서 이를 수신하여 저장할 수 없습니다.

Axios 요청 구성

코드 프런트 엔드에서 요청을 보내기 위해 제공되는 헤더 개체에는 withCredentials 속성이 포함되어 있습니다. 이 숙박 시설의 올바른 위치가 아닙니다. withCredentials는 헤더가 아닌 axios 인스턴스 자체의 속성으로 설정되어야 합니다.

// Incorrect (Sets withCredentials as a request header)
const axiosAuth = axios.create({
  ...
  headers: {
    withCredentials: true,
  },
  ...
});

// Correct (Sets withCredentials as a property of the instance)
const axiosAuth = axios.create({
  ...
  withCredentials: true,
  ...
});

해결책

withCredentials를 속성으로 이동하여 헤더가 아닌 axios 인스턴스의 브라우저는 교차 출처 응답의 Set-Cookie 헤더를 적절하게 존중하고 쿠키를 로컬에 저장합니다. 이를 통해 프런트엔드 애플리케이션은 인증 목적으로 후속 요청 시 쿠키를 API로 전송할 수 있습니다.

위 내용은 Cross-Origin API 응답에서 쿠키를 설정할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!