← 문제 라이브러리
Security 입문 14분

새 관리자 화면에서 API 호출이 CORS 정책에 막힘

관리자 화면을 새 프레임워크로 다시 만들어 admin.acme.dev에 올렸습니다.

검수된 문제무료
시나리오

관리자 화면을 새 프레임워크로 다시 만들어 admin.acme.dev에 올렸습니다. 로그인은 되는데 사용자 목록 등 API를 부르는 화면이 모두 비어 있고, 브라우저 개발자 도구에 CORS 오류가 가득합니다. 백엔드 개발자가 curl로 같은 요청을 보내면 데이터가 잘 옵니다. API 서버는 CORS를 '전부 허용'으로 설정해 두었다고 합니다. 새 화면은 로그인 쿠키를 함께 보내도록 만들었습니다. 예전 관리자 화면은 API와 같은 도메인에서 돌았기 때문에 이런 문제가 없었습니다.

단서
브라우저 콘솔
Access to fetch at 'https://api.acme.dev/v1/users' from origin 'https://admin.acme.dev' 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'.
응답 헤더 · 프론트 코드
$ curl -sI -H 'Origin: https://admin.acme.dev' https://api.acme.dev/v1/users | grep -i access-control
access-control-allow-origin: *

// admin 프론트
fetch(`${API}/v1/users`, { credentials: "include" })

과제 원인을 좁히고, 서비스를 되살리는 순서(검증 포함)와 재발 방지책을 적어 보세요.

먼저 볼 것
  • CORS는 브라우저가 검사한다(curl은 검사하지 않는다)
  • 쿠키를 보내는 요청의 CORS 조건
점검 체크리스트
  1. 브라우저 오류 메시지의 정확한 사유
  2. 응답의 Access-Control-Allow-Origin·Allow-Credentials 헤더
  3. 프론트가 credentials를 보내는지