카카오 로그인 연동시 CORS 개념 정리

개발과정에서 겪었던 이슈들을 제가 이해하기 쉽도록 리마인드하는 글입니다. 설명이 이상하거나 부족한 점이 많아도 이해부탁드립니다.

 

카카오 로그인 연동을 위해서 카카오 서버와 http 통신을 해야할 일이 있었다.

전체적인 아키텍처 구성은 아래와 같다.

2번 과정인 react 클라이언트(localhost:3000)에서 카카오 서버(https://kauth.kakao.com/oauth/token)로 요청하는 과정에서 CORS 관련 에러가 발생했다.

평소 CORS에 대해 어느정도 개념은 가지고있었지만 상세한 프로세스 과정은 알지못했다.

이 참에 CORS 정책이 무엇인지 한번 알아보자

 

<CORS란?>

- CORS는 서로 다른 출처(Origin) 간에 리소스를 전달하는 방식을 제어하는 체제

- CORS는 브라우저 정책이다. CORS 정책을 위반하지 않으려면 클라이언트, 서버 둘 다 프로토콜, 도메인, 포트가 전부 일치해야 한다.

 

CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다.

 

<예비 요청(Preflight Request)? 본 요청(Actual Request)?>

CORS 요청은 Simple/Preflight, Credential/Non-Credential의 조합으로 4가지가 존재한다.

이 네가지의 자세한 특징은 구글링해보면 알테고... 중요한건 Preflight 이다.

브라우저는 Simple Request 조건(찾아보면 나옴)에 맞지 않으면 Preflight 방식으로 요청한다.

 

먼저 서버에 예비 요청(Preflight Request)를 보내고 서버는 예비 요청에 대해 응답하고, 그 다음에 본 요청(Actual Request)을 진행한다는 것이다.. 몰랐네;; 본 요청전에 검증 과정이라고 생각하면 되겠다.

 

<CORS 관련 HTTP Response Headers>

서버에서 CORS 요청을 처리할 때 지정하는 헤더

 

- Access-Control-Allow-Origin

Access-Control-Allow-Origin 헤더의 값으로 지정된 도메인으로부터의 요청만 서버의 리소스에 접근할 수 있게 한다.

Access-Control-Allow-Origin: <origin> | *

 

<CORS 관련 HTTP Request Headers>

클라이언트가 서버에 CORS 요청을 보낼 때 사용하는 헤더로, 브라우저가 자동으로 지정하며, XMLHttpRequest를 사용하는 프로그래머가 직접 지정해 줄 필요 없다.

 

- Access-Control-Request-Headers

예비 요청을 보낼 때 포함되어, 본 요청에서 어떤 HTTP Header를 사용할 지 서버에게 알려준다.

Access-Control-Request-Headers: <field-name>[, <field-name>]*

 

CORS가 브라우저 정책이다보니 서버와 서버간에 통신에서는 해당되지 않는다. 그래서 프록시 서버를 이용해서 CORS를 해결하는 방법이 되게 인상깊었다. 역시 능력자들은 다 계획이 있구나 음..

 

 

<결론>

- CORS를 쓰면 브라우저에서 비동기 통신으로도 Same Origin Policy의 제약을 넘어 다른 도메인의 자원을 사용할 수 있다.

- CORS를 사용하려면

• 클라이언트에서 Access-Control-** 류의 HTTP Header를 서버에 보내야 하고,
• 서버도 Access-Control-** 류의 Http Header를 클라이언트에 회신하게 되어 있어야 한다.
• 결국엔 둘 다 똑같은 Header 스펙으로 주고 받아야 한다는 것.