언제 보아도 새롭다 - 또 너야 CORS

서버에 일정 작성 API 요청을 보내던 도중 예측하지 못한 다양한 에러들이 발생했다. 오늘은 몇 시간씩 우리 팀을 고생시킨 에러에 대한 트러블 슈팅을 해볼까 한다!

http 요청이 https 요청으로 자동 변환되는 현상

분명 http로 url을 작성했는데 요청을 보낼 때는 자동으로 https로 변환되어 요청되는 현상이 발생했다. 작성한 코드를 다시 살펴봐도 http로 요청을 보냈는데 계속 자동 변환이 발생하고 있었다. 구글에 관련 내용을 검색하면 chrome://net-internals/#hsts 사이트에 접속해 리다이렉트 되는 도메인을 삭제하라는 방법이 거의 모든 블로그에서 제안하는 해결책이긴 했지만 내 상황과는 조금 다른 문제라고 생각했다. 결국 2시간 동안 문제에 대해 찾아보던 도중 검색 기록, 캐시 삭제도 해보고 엣지도 설치해서 해봤지만 결국 해결하지 못했다. 매우 지친 상태로 우연히 스택오버플로우에서 내 상황과 비슷한 글을 보게 되었고 제시한 코드를 제거한 결과 정상적으로 http 요청을 보낼 수 있게 되었다!

문제의 코드

 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

• HTML 문서 내에서 Content Security Policy (CSP)를 설정하는 태그
• 구체적인 설정은 웹 페이지가 불러오는 모든 HTTP 요청을 HTTPS로 업그레이드하도록 지시합니다.

index.html에 있는 이 한 줄의 코드 때문에 많은 시간을 날렸다. 그렇게 모든 문제가 해결된 줄 알았으나 다음은 CORS가 기다리고 있었다.

CORS

• 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 적용하여 웹 페이지가 다른 도메인의 리소스에 직접 액세스하는 것을 제한
• CORS는 서버 측에서 HTTP 헤더를 사용하여 이러한 요청을 어느 도메인에서 허용할지 지정할 수 있게 해준다.
• 이를 통해 개발자는 API 서버와 클라이언트 사이트 간에 안전하게 자원을 공유할 수 있다.

우리 프로젝트에서 발생하는 문제는?

마찬가지로 여기서도 나름 많은 시간이 소모되었다. 백엔드 담당 팀원과 디스코드에서 해결 방법을 계속 모색하던 중 개발자도구 - 네트워크에서 이상한 부분을 발견했다.

단서1

서버에서 header 값에 토큰 값이 없이 비어서 에러가 발생한다는 것이었다. (null pointer exception)

• preflight 요청에서 header 값이 비어있다.

단서2

• 본 요청에는 header 값이 있다!

추리를 해보자.

확신할 수는 없지만 서버에서 preflight 요청을 처리하지 못하고 에러를 발생시킨다고 생각했다. 곧바로 서버 담당 팀원에게서 돌아온 말은

"어? 인터셉터 관련해서 문제가 있네"라는 대답이 돌아왔다.

두 가지 문제가 발생하고 결국 해결은 했지만 오랜만에 정말 지치는 과정이었다.

후기

서버와의 통신 과정에서 발생하는 에러는 항상 예측하기 힘든 것 같다. 따라서 발생할 수 있는 에러들을 처리하는 코드를 작성하는 것이 중요한 포인트다. 이제 서버와의 CORS 에러를 해결했기 때문에 남은 작업들은 수월하게 진행될 것이라 예상된다. 예전에는 그냥 해결하고 넘겼지만 언젠가 오늘처럼 문제 되는 상황이 다시 발생했을 때 해결할 수 있도록 기록, 정리하는 습관을 들여야겠다.