CORS가 어려운 이유 - 3. CORS 에러 발생 주체와 시점

CORS 에러는 웹 개발에 입문하는 많은 사람들에게 좌절을 안겨주는 유명한 오류입니다. CORS 에러는 웹을 이루는 다양한 요소를 먼저 이해하고 나면, 어렵지 않게 이해할 수 있습니다. 하지만 그 요소가 무척이나 많은데요. 필요한 개념들을 다양한 실습과 함께 모두 뜯어보고 이해해봅시다. [CORS 가 어려운 이유]는 시리즈로 구성됩니다. 아래 목차를 확인해주세요.

 

CORS 가 어려운 이유

1. CORS 에러 마주하기 
2. HTTP 요청과 응답의 구조
3. CORS 에러 발생 주체와 시점  (현재 글)

---

 

✅ CORS 에러는 누가 발생시킨건지 궁금하다면 이 글을 한 번 읽어보세요.

✅ CORS 에러를 발생시킨 주체가 '웹브라우저'임을 직접 확인해봅니다.

 

CORS 에러는 어디서 발생한 에러일까요? 서버가 에러를 응답한걸까요? 정답부터 말하자면 그 곳은 '웹브라우저'입니다. 이번 글에서는 CORS 가 발생한 위치가 웹브라우저임을 직접 확인해봅니다.

 

CORS 에러는 브라우저가 발생시킨다.

 

CORS에러는 서버의 응답 후 브라우저에서 발생합니다. 이를 확인해보기 위해 브라우저 개발자도구의 네트워크 탭에서 CORS 요청의 상태를 확인해봅니다.

브라우저에서 CORS 서버 응답 상태 확인하기

1. google.com 에 접속합니다.
2. 개발자도구를 엽니다.
3. console 탭으로 이동합니다.
4. fetch('https://www.youtube.com') 을 입력합니다.
5. network 탭으로 이동합니다.
6. www.youtube.com 로의 요청의 Status 는 CORS error 임을 확인한다.
7. 요청에 대한 서버 응답의 Status Code 는 200 임을 확인한다.

youtube.com 으로의 요청은 실패한 것처럼 보인다. (CORS error)

서버 응답은 200 OK 이다.

curl 스크립트로 서버 응답 상태 확인하기

1. (바로 위 [브라우저에서 CORS 서버 응답 상태 확인하기] 의 5. 까지 진행한 상태에서)
2. 요청 리스트(www.youtube.com)에서 오른쪽 버튼을 클릭 - Copy - Copy as cURL(bash)
   1. ⚠️본인 PC 의 환경에 맞게 설정
   2. 브라우저와 동일한 요청을 한다는 것을 보여주기 위해 복사를 진행하는 것
3. 터미널 프로그램에서 2. 에서 복사한 스크립트를 입력한다.
4. 에러가 발생하지 않음을 확인한다.

환경에 맞게 요청 스크립트를 복사해준다.

 

브라우저와의 동일한 요청이었을텐데도 응답의 양이 상당한 것을 확인할 수 있습니다. (약 513kb 의 데이터가 응답되었습니다.)

웹브라우저에서와 동일한 요청일텐데도 무언가 응답된 양이 상당하다.

추가 도전 과제

브라우저에서는 CORS 에러가 발생했지만, 서버는 정상적으로 요청을 처리해 응답했음을 명확히 확인하는 방법이 있습니다. 이 글에서 다루지는 못했습니다만, 개요만 적어봅니다.

• 와이어샤크를 활용하여 네트워크 요청/응답 모니터링하기 -> 서버는 정상적인 응답을 했음을 확인
• localhost 에 두 대의 서버를 실행하여(port 다르게) CORS 에러가 발생하지만 교차출처에 해당하는 서버에서 요청 확인하기