API 요청이 느려지면 CORS 확인부터 시작하자

API 요청이 갑자기 느려지면 보통 백엔드 성능을 의심한다. 하지만 CORS 설정이 틀리면 브라우저가 불필요한 preflight 요청을 반복하느라 응답이 느려진다.

먼저 브라우저 네트워크 탭 열어보기

Chrome DevTools의 Network 탭을 켜고 느린 요청을 확인하면 패턴이 보인다. OPTIONS 요청이 많으면 CORS preflight 때문일 가능성이 높다.

• 정상: GET/POST 요청 1개씩
• CORS 문제: OPTIONS 요청 후 실제 요청이 따라옴

요청과 응답의 헤더 읽기

Network 탭에서 느린 OPTIONS 요청을 클릭해서 Response Headers를 본다.

curl -i -X OPTIONS 'https://example.com/api/items' \
  -H 'Origin: https://myapp.com' \
  -H 'Access-Control-Request-Method: POST'

응답에 Access-Control-Allow-Origin, Access-Control-Allow-Methods 헤더가 있는지 확인한다. 없거나 origin이 일치하지 않으면 CORS 설정을 고쳐야 한다.

인증 상태와 자격증명 (credentials)

fetch 요청에 credentials: 'include'를 썼다면, CORS 응답에는 Access-Control-Allow-Credentials: true가 필요하다. 없으면 브라우저가 요청을 거부한다.

fetch('https://api.example.com/data', {
  credentials: 'include',  // 쿠키를 함께 보낸다
  method: 'POST'
});

백엔드 CORS 설정이 이를 허용하는지 확인하자.

백엔드 CORS 설정 점검

Express를 쓴다면:

curl -i 'https://example.com/api/items?page=1'

Response Headers에서 CORS 관련 헤더들이 보이는지 확인한다. 없으면 미들웨어가 제대로 적용되지 않았을 가능성이 있다.

한 가지씩만 바꿔보기

CORS 설정을 여러 개 동시에 고치면 어느 것이 문제였는지 알 수 없다.

1. origin 허용 범위를 확인한다
2. 허용 메서드를 확인한다 (GET, POST, PUT, DELETE 등)
3. 허용 헤더를 확인한다 (Content-Type, Authorization 등)
4. 각 단계마다 curl로 preflight 요청을 다시 시도한다

브라우저에서 다시 확인하기

CORS 설정을 고친 후 Cache-Control을 고려해야 한다. Preflight 응답은 최대 1시간까지 캐시된다. 브라우저를 완전히 재시작하거나 DevTools를 열어서 "Disable cache" 옵션을 켜야 즉시 반영된다.