로그인을 구현하다가 다음과 같은 에러를 만났다. 후.. 해결해보자.
This Set-Cookie Domain Attribute Was Invalid With Regards To The Current Host Url
우선, 쿠키는 서버에서 사용자 에이전트로 보내는 작은 정보이다. 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 쿠기도 마찬가지이다. 즉, 서버와 클라이언트의 Origin(출처)가 달라서 발생하는 문제이다. Origin은 null이나 아래와 같은 값이 올 수 있다.
Origin: <scheme> "://" <hostname> [ ":" <port> ]Origin이 같은 것은 scheme과 hostname, port가 같은 것을 의미한다.
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Origin
Origin - HTTP | MDN
Origin request 헤더는 fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. POST requests에 포함되는 것처럼, CORS requests 와 함께 전송합니다. Referer 헤더와 비슷하지만, or
developer.mozilla.org
해결 방법
몇 가지 해결 방법이 있다.
- cors, cookie 옵션을 조정한다.
- 같은 출처로 서비스를 제공한다. (서버에서 프런트, api 모두 제공 혹은 프록시 이용)
문제 해결 과정
위의 해결 방법을 이용해서 원래 에러는 해결했지만(프록시를 쓰면 따로 cors 설정을 하지 않아도 된다.), 아래와 같이 Set-Cookie에 아무런 이상이 없는데도 불구하고 cookie 설정이 안 된 것을 볼 수 있다. 무엇이 문제일까... 한참 고민 후 찾아내었다.
localhost와 127.0.0.1을 혼용해서 쓰고 있었던 것이다. 예전에 webserv 만들면서, 해당 문제를 겪어서 다짐했음에도 불구하고 문제 원인파악에 오랜 시간이 걸렸다.
이유를 생각해보면 'http://127.0.0.1:5500/auth/login' 이런 주소들을 상수로 관리하지 않고 하드코딩을 해서 여러 군데 분포돼있다보니까 발견하는데 어려움이 많았다. 따라서, 앞으로는 무조건 한 곳에 상수로 선언하고 관리하도록 하자.
댓글