들어가며
최근 토이 프로젝트 진행 중에 발생한 CORS 이슈에 대해 원인과 해결 방법에 대해 정리한 내용을 글로 쓰고자 한다.
React에서 한국투자증권 오픈 API를 이용하여 데이터를 보여주는 방식으로 진행하고자 하였다.
하지만 오픈 API 서버에서 CORS 정책을 허용하지 않아서 React Client에서 직접적인 API호출이 불가능하다는 사실을 알게 되었다.
여기서 CORS란 무엇인지 간단히 알아보자.
CORS란?
Cross-Origin Resource Sharing (CORS)는 웹사이트가 서로 다른 출처에서 리소스(데이터나 콘텐츠)를 요청하고 공유하는 방법을 의미한다.
그렇다면 CORS가 왜 필요할까?
예시를 들어보자.
1. 같은 출처인 경우
- https://mysite.com 해당 사이트에서 자바스크립트로 https://mysite.com/data에 있는 데이터를 가져오기
2. 다른 출처인 경우
- https://mysite.com 해당 사이트에서 자바스크립트로 https://ohtersite.com/data 에 있는 데이터를 가져오기
다른 출처의 경우 보안상의 이유로, 브라우저는 기본적으로 다른 출처의 리소스를 요청하는 것을 막는다. 이것을 "동일 출처 정책"이라고 한다. 하지만 때로는 다른 출처에서 가져와야 할 때가 있기 때문에 서버에서 이런 요청을 허용할 수 있다.
즉, CORS는 한 웹사이트에서 다른 웹사이트의 데이터를 안전하게 요청하고 받을 수 있도록 도와주는 방법이다.
CORS를 해결하는 방법 2가지
1. 특정 헤더 추가하기
요청하는 서버가 내가 운영하는 서버라면 서버응답에 Access-Control-Allow-Origin 헤더를 추가하여 어떤 출처에서 오는 요청을 허용할지 지정할 수 있다.
2. Proxy 서버 사용하기
여기서 Proxy 서버란 "대리 서버"란 뜻이다. 즉 client와 api서버 간에 요청을 대리로 처리해 주는 서버이기 때문에 Proxy 서버라고 부른다.
Proxy 서버를 사용하면 브라우저와 원래 서버 사이에 중간 서버를 두어 CORS 문제를 우회할 수 있다. CORS 문제가 브라우저에서의 다른 도메인에 대한 요청을 막으므로 서버와 서버 간의 요청은 포함되지 않기 때문에 유용한 방법이다.
Proxy 서버를 사용하지 않았을 경우는 다음과 같다.
API 서버가 CORS 정책을 허용한다면 가능하지만 한국투자증권 API 서버는 허용하지 않기 때문에 불가능하다.
Proxy 서버를 사용하였을 경우는 다음과 같다.
node.js의 Express.js를 이용하여 서버를 구축하였고 React에서 요청받으면 한국투자증권 API로 대신 요청을 보낸다.
client의 부담을 덜기 위해 client에서 필요한 정보만을 가공하여 response 해주는 로직을 추가하였다.
다된 밥에 Redis 곁들이기
위의 과정만으로도 정상적인 동작이 가능하지만 필자는 Redis 서버를 이용하여 불필요한 API 요청을 줄이고자 도전해 보았다.
불필요한 API 요청이란?
같은 parameter로 요청하면 일정기간 동안은 같은 데이터를 반환하기 때문에 굳이 한국투자증권 API에 계속 요청할 필요가 없다.
이점이 있을까?
1. 데이터 반환 속도가 훨씬 빨라진다. (후반부에 비교분석)
2. API 요청에 제한을 걸어두는 곳이 많기 때문에 이를 효율적으로 사용할 수 있다.
redis를 간단하게 소개하자면 인메모리 DB로 key : value 형식으로 데이터를 저장한다. 메모리를 써서 데이터를 저장하기 때문에 일반 DB보다 접근 속도가 월등히 빠르다. 그래서 캐시 서버를 만들 때 많이 사용한다.
동작순서
1. Client에서 request를 보낸다.
2. node js에서 request parameter를 key로 사용하여 value(json 데이터)를 찾는다.
캐싱 전략 : request parameter마다 반환받는 데이터가 다르니 이를 Key로 지정하였다.
3-1. value를 찾았다면 그대로 client에게 바로 반환한다.
3-2. value를 찾지 못했다면 원래대로 한국투자증권 API로 요청을 전달하여 json을 반환받고 데이터를 가공하여 Redis 서버에 저장하고 client에게 데이터를 반환한다.
성능 테스트를 해보니 3배정도 빨라진 것을 확인해 볼 수 있다.
React Repo : https://github.com/woorifisa-service-dev-3rd/frontend-3rd-stockoption-FE
GitHub - woorifisa-service-dev-3rd/frontend-3rd-stockoption-FE
Contribute to woorifisa-service-dev-3rd/frontend-3rd-stockoption-FE development by creating an account on GitHub.
github.com
Proxy Repo : https://github.com/woorifisa-service-dev-3rd/frontend-3rd-stockoption-Proxy
GitHub - woorifisa-service-dev-3rd/frontend-3rd-stockoption-Proxy
Contribute to woorifisa-service-dev-3rd/frontend-3rd-stockoption-Proxy development by creating an account on GitHub.
github.com