CSRF 쿠키를 생성하기 위해 프런트엔드에서 Laravel Sanctum을 사용할 수 없습니다.

Question

최근 Nuxt 3에서 인증을 위해 Laravel Sanctum을 사용하려고 시도했지만 초기 CSRF 쿠키 핸드셰이크 중에 문제가 발생했습니다. 문제는 http://localhost:8000/sanctum/csrf-cookie 경로를 요청한 후 브라우저에서 XSRF-TOKEN 쿠키를 설정하지 않는다는 것입니다. 나는 이 문제로 일주일 동안 갇혀 있었고 인터넷에서 해결책을 찾지 못했습니다. XSRF-TOKEN을 설정하기 위해 Axios 및 Fetch API를 사용해 보았으나 성공하지 못했습니다. 저는 백엔드에서 http://localhost:8000를 사용하고 프런트엔드에서 http://localhost:3000를 사용하고 있습니다. Laravel Sanctum 자체는 Postman에서 테스트할 때 set-cookie 헤더를 수신하지만 브라우저는 수신하지 않는 것처럼 잘 작동합니다. .env 파일에 다음 속성을 설정했습니다.

FRONTEND_URL=http://localhost:3000
    SESSION_DOMAIN=localhost:3000
    SESSION_DRIVER=쿠키

저는 프런트 엔드에서 CORS 요청의 한계를 극복하기 위해 모든 노력을 기울였습니다. 내 가져오기 기능은 다음과 같습니다.

window.fetch('http://localhost:8000/sanctum/csrf-cookie', {
        자격 증명: '포함',
      }).then((응답) => {
        console.log(…응답.헤더)
      })

자격증명을 '포함'으로 설정하면 문제가 해결된다는 내용을 읽었지만, 그래도 여전히 XSRF-TOKEN을 설정할 수 없습니다. 자격 증명을 'same-origin'으로 설정하려고 시도했지만 작동하지 않았습니다. 이 문제를 해결하는 방법을 아는 사람이 있나요?

Answer 1

문제는 브라우저가 다른 포트의 쿠키를 허용하지 않는다는 것입니다.

백엔드는 포트 8000에서 실행되고 프런트엔드는 포트 3000에서 실행되므로 백엔드에서 제공하는 쿠키는 프런트엔드에 설정되지 않습니다.

따라서 해결 방법은 API 엔드포인트에 대해서만 CSRF 보호를 비활성화하는 것입니다. VerifyCsrfToken미들웨어에서 이 작업을 수행할 수 있습니다.

이 줄을 $except배열에 추가하면 준비가 완료됩니다.