[React] 로컬 쿠키가 브라우저에 저장되지 않을 때

로컬에서 백엔드 쿠키 추가하고, 포스트맨으로 확인하면 쿠키가 잘 내려오는 것을 확인할 수 있다.
프론트에서 실제 api를 호출하면 분명 브라우저에는 쿠키 정보가 잘 보인다. 하지만 저장은 되지 않는 상황!
백엔드와 프론트의 origin이 달라서 생기는 쿠키 저장 문제인 것 같다. 아직 정확하게 파악하지는 못했지만..그런 것 같다.
백엔드를 서버에 올리기도 하고 백엔드의 설정 정보를 변경하기도 하지만 해결 안됨.
결국 프론트에서 credential 설정 문제로 다시 돌아간다. 기존의 same-origin을 include로 변경하니 잘 돌아간다. (근데 전체적으로 수정하지 않았을 땐, include로 호출하니 request error 발생했음. 이 문제가 어떻게 해결되고 정상 request로 돌아가게 된 건지를 찾아야겠다.)
이게 되면서 cross origin 문제였음을 좀더 확실히 알 수 있다.
아 그리고 나처럼 fetch response에서 혹시 쿠키 정보를 확인하려는 사람이 있다면 그 삽질은 잘못된 접근이라는 것을 말해주고 싶다.

A RequestCredentials dictionary value indicating whether the user agent should send cookies from the other domain in the case of cross-origin requests. Possible values are:

• omit: Never send or receive cookies.
• same-origin: Send user credentials (cookies, basic http auth, etc..) if the URL is on the same origin as the calling script. This is the default value.
• include: Always send user credentials (cookies, basic http auth, etc..), even for cross-origin calls.

크롬에서 로컬 쿠키 저장을 못한다는 등 여러 정보들이 많지만, 그게 문제였던 건 아닌 것 같다.
이 작업을 하면서, 개발자 도구에서 저장된 쿠키 정보를 알 수 있는 기능을 새로 알았다.
짧게 쓰지만 엄청난 삽질.. 풀스택 개발하면서 처음으로 해결 못할 것 같다는 생각이 든 문제..

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
• https://github.com/github/fetch/issues/386