CORS 에러를 해결하는 방법과 Proxy 기능

꼭 들어가야 할 키워드
CORS 에러를 해결하는 방법
proxy 기능

CORS 정책이 필요한 이유는?

우리의 브라우저에서는 기본적으로 API 요청을 할때 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터에 접근할 수 있다.

• 만약 다른 도메인에서 API를 요청해서 사용하려면?? -> CORS 설정이 필요!

CORS가 뭐에요?

• 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)라고 한다.
• 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
• 같은 출처이려면 두 객체의 스킴, 호스크, 포트가 모두 일치하여야 하고 다른 출처일때는 CORS를 통해 제한을 해제하여야 한다.

CORS 정책이 없다면??

• 우리가 실제 서비스가 되는 상용 앱을 운영 중이라면, 우리가 구축한 클라이언트 뒤의 서버와 연결되어 있는 DB에는 라이브 데이터(live data)가 쌓일 것!
  + 라이브 데이터란 유저 및 상품, 결제 등 다양한 정보들
• 이런 라이브 데이터는 민감성이 높은 데이터들이 위주이기 때문에 보안이 무엇보다 중요하다!
• 만약 우리의 서비스와 프로젝트가 모든 출처의 접근을 허락한다면 보안성이 현저히 낮아지고 해킹의 위험에 노출될 수 있는 것!
• 그렇기 때문에 우리는 모든 도메인을 허용해서는 안되고, 특정 도메인을 허용하도록 구현해야한다

Proxy 기능

• 하지만.. CORS에러는 보안성에는 아주 좋지만 개발자에겐 아주 골치아픈 에러!!
• 잠깐 CORS 정책을 우회할 수는 없을까?? -> Proxy 기능을 사용하면 됨!

Proxy가 뭐에요?

• Proxy는 대리라는 뜻을 가지고 있고 남을 대신하여 일을 하는 의미
• 즉 대신 처리하는 서버!

Proxy 서버란?

• 클라이언트와 서버간의 중계서버로, 통신을 대리 수행하는 서버
• 캐시 / 보안/ 트래픽 분산 등 여러 장점을 가질 수 있음

Proxy vs CORS 과정

• Proxy 기능을 사용할 때와 CORS 과정을 비교해보자
• React 라이브러리 혹은 Webpack Dev Server에서 제공하는 proxy기능을 사용하면 CORS 정책을 우회할 수 있다!
  + 이는 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고 해당 요청을 백엔드로 전달하게 됨
  • 여기서 React 앱이 서버로부터 받은 응답데이터를 다시 브라우저로 전달하는 방법을 쓱 때문에 브라우저는 CORS 정책을 위반한지 모르게 됨!
    ⇒ 브라우저를 proxy 기능을 통해 속이는 것

Proxy를 사용했을때

• 위의 그림은 proxy를 적용해 브라우저를 속인 후 흐름.

1. React 앱에서 브라우저를 통해 API 요청을 할때, 브라우저를 거쳐 proxy로 가게 됨
2. proxy를 통해 백엔드 서버로 요청을 우회하여 보내게 됨
3. 그러면 백엔드 서버는 응답을 React 앱으로 보내고
4. React앱은 받은 응답을 백엔드 서버 대신 브라우저에게 전달

⇒ 이렇게 되면 출처가 같아지기 때문에 브라우저는 이 사실을 눈치 채지 못하고 허용하게 된다!

CORS를 사용한다면?

• 정석적인 과정으로 비교해보자
  

  proxy를 적용해 브라우저를 속이기 전 흐름 (정석적인 과정)
  

1. 프론트엔드, 즉 우리가 개발한 React 앱에서 브라우저쪽으로 요청을 보냄
2. 그러면 브라우저는 백엔드, 즉 서버 쪽으로 리소스를 요청하기 된다! 이때 접근 권한이 있는지 (출처가 같은지) 확인
3. 백엔드 서버는 정상적으로 200 OK 응답을 브라우저에게 보냄
4. 마지막으로 브라우저는 받은 리소스 및 응답과 함께 출처가 같은지 아닌지 확인하게 되는데
   • 이때 출처가 다르다면 응답을 파기(CORS Error)하고
   • 출처가 같다면 응답을 파기하지 않고 다시 프론트엔드 쪽으로 응답을 보내줌

Proxy를 사용하면 (마무리)

• 보안 상의 문제로 CORS가 많은 역할을 하지만 CORS 응답헤더를 제대로 하더라도 CORS 에러가 뜨는 경우가 꽤 있다. 그럴 때! 쓰기 좋은 Proxy 기능이다.
• Proxy를 잘 활용한다면 향후 개발 프로젝트 할 때에도 CORS 에러 때문에 골치 아파할 일이 적어질 거라고 믿는다..!