• 단순 요청 조건을 벗어나면 브라우저가 본 요청 전에 자동으로 보낸다1
  • OPTIONS 메서드로 요청
  • cloudfront에 OPTIONS 메서드 설정이 안되어 있다면 실패2

Footnotes

  1. Preflighted requests | MDN: “Unlike simple requests, for “preflighted” requests the browser first sends an HTTP request using the OPTIONS method to the resource on the other origin, in order to determine if the actual request is safe to send.“ ↩

  2. CloudFront 배포의 캐시 동작이 HTTP 요청에 대한 OPTIONS 메서드를 허용함: “CloudFront는 기본적으로 GET 및 HEAD 메서드만 허용합니다.” ↩

#fetch#preflight#simple-requests
#53

CORS error 원인 찾기

언제 왜
Console·Network 에 CORS error preflight 에 Access-Control-Allow-Origin(ACAO) 이 없으면 브라우저는 5xx·404·타임아웃을 전부 CORS 로 뭉갠다1
preflight 가 server: awselb/2.0 의 5xx LB 가 직접 만든 응답이다 — 앱 응답이 아니니 CORS 헤더가 붙을 수 없다

정상이면 OPTIONS 가 LB 를 지나 앱에 닿고 앱이 204 와 access-control-allow-origin 을 돌려준다. 장애면 등록된 타깃이 0 이라 LB 가 CORS 헤더 없는 503 을 직접 만들어 돌려주고, 브라우저는 그걸 CORS error 로 표시한다.

preflight 의 status 와 server 헤더 둘로 가른다.

preflight server ACAO 갈래 원인
503 awselb/2.0 없음 인프라 등록된 target 02 — 서비스 다운·배포 실패·CrashLoop
502 awselb/2.0 없음 인프라 타깃이 끊거나 잘못 응답 — 크래시·OOM·포트 불일치
504 awselb/2.0 없음 인프라 LB idle timeout 초과 — 느린 쿼리·외부 연동 지연
404 앱 없음 경로 path 오타, ingress rule 불일치
204·200 앱 없음 CORS CORS 미설정
204 앱 있음 CORS access-control-allow-headers 에 요청 헤더가 빠짐
204 앱 * CORS credentials: 'include' 와 * 는 병용 불가 — 오리진을 명시한다
204 앱 정상 정상 CORS 아님. 본 요청의 본문·인증·에러를 본다

Footnotes

  1. CORS errors — MDN: “For security reasons, specifics about what went wrong with a CORS request are not available to JavaScript code. All the code knows is that an error occurred.” ↩

  2. ALB 트러블슈팅 — HTTP 503: “The target groups for the load balancer have no registered targets, or all of the registered targets are in an unused state.” 전부 unhealthy 면 503 이 아니라 그대로 보낸다 — health checks: “If a target group contains only unhealthy registered targets, the load balancer routes requests to all those targets, regardless of their health status.” ↩

#cors#preflight#alb#http#debug
#599