오늘은 유명한 cors 에러에 대해 적어보고자 한다.
cors 에러를 매번, 매 프로젝트를 시행할때마다 겪고 있지만,,,매번 새롭다,,,
정말 애증의 http 통신,,,
한번,,,시작해보자고,,,
사건 발생
프로젝트에 Youtube API playlist를 받아올 때 발생한 cors에러는 headers를 설정해도,,, next.config.js에 proxy 설정을 해도,,해결되지 않았다,,,
Youtube API cors 에러를 찾아봤더니 의외로 나와 같은 고통을 호소하는 분들이 많았고,,,이미 에러에 대한 fix가 끝났으나 cors 문제는 계속해서 생겨 나는 것 같다. 운 나쁘게도 나 또한 cors 뽑기에 당첨된 것 같다,,^___^
그렇게 슬퍼하던 중 마지막 끈을 잡듯 server 컴포넌트에서 api를 호출했더니 마법처럼 데이터를 패칭해줬다,,,,
(감사합니다,,,ㅠㅠㅠㅠㅠㅜㅜㅠㅠㅜㅠ제가 열심히 살겠슴ㄴ디ㅏ,,,,)
????,,,그런데 왜 되는거지,,?
궁금증 해결
그 이유를 알기 위해선 cors가 무엇인지에 대해 알아야한다.
우선 브라우저는 API를 통해 서버와 통신한다. 그리고 API를 통해 사용자 인증 토큰 등을 공유하게 된다.
A 브라우저에서 로그인 후 사용자 인증 토큰을 발급 받았다. 그리고 로그인한 채로 B 브라우저에 접속 시, http 통신을 하게 되면 자동으로 쿠기 값을 첨부하여 A 브라우저의 사용자 인증 토큰을 이용해 B 브라우저의 사용자인척 요청을 보낼 수 있게 된다. 그래서 브라우저는 보안을 위해 동일한 출처(Origin)로 제한한다. 이것이 동일 출처 정책인 SOP(Same-Origin Policy)이다.
여기서 출처(Origin)은 무엇을 뜻하는 것일까?
출처(Oirign)?
https://example.com:80/search?q=value&size=15&page=1
위 URL을 예시로 설명해보도록 하겠다. URL은 그냥 하나의 문자열처럼 보이지만 URL은 아래처럼 여러 가지로 구성되어 있다.
| Porotocol | Host | Port | Path | Query string |
|---|---|---|---|---|
| https | example.com | :80 | /search | ?q=value&size=15&page=1 |
위 구성 요소 중 Protocol, Host, Port가 바로 출처(Origin)이다. 그 외의 요소들은 바뀌어도 브라우저는 같은 출처로서 인식한다.
CORS(Cross-Origin Resource Sharing)
개발을 하다보면 외부 API를 사용해야하는 경우가 많은데 어떻게 통신을 해야할까? 이때 등장하는 개념이 개발자 도구에서 빨갛게 맞이해주는 CORS이다. CORS 에러는 외부 출처(다른 출처) 공유 허용 정책에 따르지 않아 발생하는 에러인 것이다.
브라우저의 출처 심사 과정 ^^,,
브라우저는 다른 출처로 요청을 보낼 때 다음 절차를 거쳐 진행한다.
- 헤더에 'Origin'이라는 값을 포함하여 요청한다.
- 서버는 요청을 받아 응답할 때, 헤더에 'Access-Control-Allow-Origin'이라는 심사 통과 도장을 찍어보내주는 것이다.
- 그리고 브라우저에서 이 요청 헤더의 'Origin'과 서버 응답 헤더의 'Access-Control-Allow-Origin'을 비교하고 리소스의 허용/비허용을 결정한다.(비교 후 비허용 결정이 난다면 해당 응답을 보내주지 않는다. 이것이 바로 CORS 에러이다.)
위의 내용에서 알 수 있는 정보는 다음과 같다.
- 서버에서 'Access-Control-Allow-Origin'을 설정해주어야 CORS 에러를 마주 하지 않는다는 것.
- 그리고 서버에서 CORS 에러를 판단하여 데이터를 보내주지 않는 것이 아니라 브라우저 자체에서 응답을 차단을 한다는 것이다.
그리고 이를 통해 궁금증을 해결할 수 있었다,,!!!(정말 먼 길을 돌고 돌았따 ㅎㅎ,,)
결론
'왜 server 컴포넌트에서는 cors 에러가 일어나지 않는 것일까?'의 답은
브라우저 자체에서 응답을 차단하는 것이기 때문에 서버와 서버 간의 통신인 server 컴포넌트 내에서의 http 통신은 cors 에러에 해당하지 않는다는 것이다.
매 프로젝트에서 CORS 에러를 마주하는 나에게는 굉장히 힘든 시간 뜻 깊은 시간이었다,,^__^
다음에 CORS 에러를 만나게 된다면 그때는,,,무서워하지 않고 맞서 싸울 수 있을 것 같다 ㅎㅎ!
