CORS + 쿠키 인증인데 credentials 요청이 프리플라이트에서 막힙니다

Question

프론트(app.example.com)에서 API(api.example.com)를 쿠키 인증으로 호출하는데 계속 막힙니다.

Access to fetch ... has been blocked by CORS policy:
The value of the 'Access-Control-Allow-Origin' header in the response
must not be the wildcard '*' when the request's credentials mode is 'include'.

서버에 Access-Control-Allow-Origin: *와 credentials: true를 같이 줬는데도 안 됩니다. 쿠키도 요청에 안 실리는 것 같고요.

김영삼 · Accepted Answer

두 가지가 동시에 걸렸습니다. 1) 와일드카드 + credentials 동시 사용 불가 — 에러 메시지 그대로입니다. credentials: 'include'면 서버는 *가 아니라 정확한 출처를 돌려줘야 하고, Access-Control-Allow-Credentials: true도 함께 줘야 합니다. // 서버 (Express cors 예) cors({ origin: 'https://app.example.com', credentials: true }) // → Access-Control-Allow-Origin: https://app.example.com // Access-Control-Allow-Credentials: true 2) 프론트도 credentials 명시 + 쿠키 속성 fetch(url, { credentials: 'include' }) 교차 사이트로 쿠키가 실리려면 쿠키에 SameSite=None; Secure가 필요합니다(HTTPS 필수). 서브도메인 공유면 Doma

프론트하림 · Answer

정확한 origin으로 바꾸고 SameSite=None; Secure 주니까 됐습니다! 로컬 개발(http)에서만 쿠키가 안 실리는데 이건 Secure 때문이겠죠?

김영삼 · Answer

맞습니다. Secure 쿠키는 HTTPS에서만 전송됩니다. 로컬은 ① https 개발 서버를 쓰거나 ② 같은 출처로 프록시(dev 서버 proxy)해서 교차 사이트 자체를 없애는 방법이 깔끔합니다. 운영은 그대로 SameSite=None; Secure 유지하세요.

프론트하림 · Answer

dev 프록시로 로컬도 해결했습니다. 와일드카드+credentials가 안 된다는 걸 이제 확실히 알았네요. 감사합니다!

댓글 4