브라우저에서 CORS 에러가 나면 확인할 것

CORS 에러는 자꾸만 헷갈린다. 운영 중에는 작은 이상 신호도 빨리 분리해서 봐야 한다.

핵심은 문제를 하나의 설정으로 보지 말고, 전체 흐름에서 원인을 찾는 것이다. 로그, 응답, 설정 중 하나를 증거로 잡아야 한다.

먼저 제외할 것들

브라우저 개발자도구의 네트워크 탭을 열고, 요청이 나가고 있는지 먼저 확인한다. 요청이 안 나가면 프론트엔드 코드 문제다.

요청은 나가는데 CORS 에러가 난다면, 서버의 CORS 설정을 확인해야 한다.

sudo ss -lntp
df -h
sudo journalctl -n 80

서버는 실제로 떠있나, 포트는 열려있나, 에러 로그는 없나.

로그로 확인하기

운영 환경 로그는 가장 정직한 증거다. API 서버에 요청이 도착했는지, 도착했다면 뭘 응답했는지 로그에 남는다.

같은 조건에서 다시 요청을 보내고, 로그에서 달라진 부분을 한 줄로 설명할 수 있나 확인한다.

CORS 설정 확인

서버가 제대로 CORS 헤더를 보내고 있나 확인한다. Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Credentials 같은 헤더가 있나.

환경별로 CORS 설정이 다를 수 있다. 로컬에서는 허용하지만 배포 환경에서는 제한할 수도 있다.

권한 문제 확인

CORS 설정을 바꿀 권한이 있나 확인한다. 한 번에 여러 설정을 바꾸지 않는 것도 중요하다.

1. 실제로 같은 조건에서 에러가 나타나나 확인한다.
2. 서버 로그에서 뭐가 달라졌는지 정확히 설명한다.
3. 브라우저 개발자도구에서 응답 헤더를 최종 확인한다.

CORS 설정은 한 번 맞히면 대부분 문제가 없다. 이번 확인을 기록해두면 다음 프로젝트에도 도움이 된다.