Fe/bugfix/#584 최초 로그인 시 카카오톡 로그인 후 쿠키가 붙지 않음

[HeoJiye]

🔮 resolved #584

변경 사항

• 클라이언트에서 서버에 로그인 요청 시 SameSite 헤더 설정을 추가함.

고민과 해결 과정

1️⃣ 원인

This attempt to set a cookie via a Set-Cookie header was blocked because it had the "SameSite=Lax" attribute but came from a cross-site response which was not the response to a top-level navigation.

로그인을 하는 과정에서 위와 같은 경고 문구가 떴음.

이는 현재 클라이언트에서 서버로 로그인 요청을 보낼 때 서버가 쿠키 설정을 해주게 되는데
지금은 요청의 헤더의 SameSite 속성이 기본 값인 Lax로 설정되어 있기 때문이다.

SameSite=Lax는 보안 상의 이유로 쿠키 전송을 일부 제한하는데, 다른 사이트에서 쿠키 설정을 하려고 하면 차단하게 된다...

그래서 localhost 설정에서는 정상적으로 동작했지만, web09-magicconch.pages.dev와 was.magicconch.com끼리에서는 제대로 동작하지 않았던 것이다.

2️⃣ 간단하게 해결

 const res = await axios.get(KAKAO_LOGIN_URL, {
      params: { code },
      withCredentials: true,
+      headers: {
+        SameSite: 'None',
+        Secure: true,
+      },
    });

(선택) 테스트 결과

ex) 베이스 브랜치에 포함되기 위한 코드는 모두 정상적으로 동작해야 합니다. 결과물에 대한 스크린샷, GIF, 혹은 라이브 데모가 가능하도록 샘플API를 첨부할 수도 있습니다.

실제 배포 환경에서 제대로 돌아가는 지 확인해봐야 함

[kimyu0218]

💬 오 네트워크 탭에 있었구나!! 백엔드도 lax 수정할게~ 그리고 아래 물음표 코멘트 확인해줘!!
💬 cloudflare 빌드 에러도!!

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	51059b2
Status:	✅  Deploy successful!
Preview URL:	https://9efa3c77.web09-magicconch.pages.dev
Branch Preview URL:	https://fe-bugfix--584.web09-magicconch.pages.dev

View logs

[Doosies]

lax 일때는 쿠키도 안붙어버리는구나!!

[kimyu0218]

💬 빌드 에러 떴는데 확인해줘!!