[React][Axios] CORS에러 발생 이유와 proxy를 통한 해결

CORS란?

CORS (Cross-Origin Resource Sharing) Policy(정책)는 웹 브라우저에서 실행되는 웹 애플리케이션들이 다른 도메인(origin)에 있는 리소스에 접근할 수 있는 권한을 부여하거나 제한하는 보안 정책입니다. 

 

위 에러는 CORS 에러 입니다. 아마 다들 한 번 쯤은 봤을 에러인데요. 이 글에서는 왜 이러한 에러가 발생하는지, 그리고 어떻게 해결하는 지에 대해 아주아주 간략하게 정리해 보겠습니다. 

 

CORS에 대한 개념을 알아보기 위해 이 글을 보시는 것은 추천드리지 않습니다 🥲 다소 생략된 부분이 있다고 느끼실 수 있어요! 

 

CORS에러가 발생하는 이유

앞서 말했듯이 CORS는 다른 도메인에 있는 리소스에 접근하는 것과 관련이 있습니다. 

여기서 다른 도메인(origin)이란 프로토콜(protocol), 호스트(host), 포트(port)를 합친 것이고, 각각을 비교하여 셋 중 하나의 문자열이라도 다를 경우 다른 도메인으로 인식합니다.

 

여기서 "문자열"을 비교한다는 것에 주의해주셔야 합니다.

localhost:3000과 127.0.0.1:8080은 같은 주소를 의미하지만 

"localhost"와 "127.0.0.1" 이 호스트의 문자열이 다르기 때문에 다른 도메인으로 인식합니다.

 

SOP

아니!! 달라도 요청정도는 보낼 수 있는거 아니야? ㅡㅡ 라고 생각하실 수도 있습니다.

하지만 정책상 불가능 하다는 것을 알게되었습니다. 

그 정책은 바로 SOP(Same Origin Policy), 동일 출처 정책입니다.

 

이 SOP 정책은 동일한 출처에서만 리소스를 공유할 수 있다는 정책을 가지고 있습니다.

즉, 동일한 도메인(origin)의 서버에 있는 리소스는 자유롭게 사용이 가능하지만! 다른 출처(cross origin)의 서버에 있는 리소스는 사용하지 못한다는 것이죠!

 

그렇다면 CORS 에러가 난 이유는

➡️ SOP를 어겼기 때문!

 

그럼 에러를 해결해보자 (React)

에러를 해결하기 위해서 사실 서론이 길었습니다.

이 에러를 해결하기 위한 방법은 아주아주 간단하거든요!

 

바로 리액트 앱의 package.json에 proxy 설정을 해주시면 됩니다

//package.json

{
    ...,
    ...,
    "proxy": "요청을 보내고자 하는 origin"
}

이런 식으로 해결을 했을때

"여러가지 API를 관리하는 CORS 설정을 하기 위해서는 어떻게 해야하지?" 라는 의문이 드실 수 있습니다.

http-proxy-middlewar 라는 라이브러리를 통해 여러 API에서 CORS설정을 할 수 있습니다

다만 이 글에서는 다루지 않고 있습니다... 

이거 정리하려면 글을 또 일주일동안 미루면서 쓸 게 분명하기 때문에... 아마 나중에 다른 글에서 볼 수 있을 것 같습니다.

 

 

 

 

---

사실 CORS같은 경우에는 웹 개발자라면 반드시!!!!!!!!! 알아야 하는 개념이라고 하기 때문에, 단순히 에러만 처리하지 않고 개념에 대해서도 공부해봤습니다. 제가 정리한 내용은 아주 빙산의 일각이기 때문에... 이 글을 통해 아~ 이런거구나! 만 알고 가지 마시고 다른 글들도 읽어보시는 것을 추천드립니다. (근데 이 글을 누가 볼까요...)