CORS 프록시 서버 구축 (Feat. CORS Anywhere & Heroku)

CORS 프록시 서버 구축 (Feat. CORS Anywhere & Heroku)

반응형

CORS Anywhere와 Heroku를 이용하여 CORS 프록시 서버를 구축하는 방법입니다.

Front에서 공공 API와 같이 교차 URL을 호출할 때 CORS 에러를 접하게 되는데, 이것 때문에 프록시 서버를 직접 구축(혹은 이미 사용하고 있는 서버를 이용)하는 게 여간 귀찮을 때가 있습니다. 간단한 사이드 프로젝트라면 더욱 그럴 거고요.

이럴 때 CORS Anywhere와 Heroku를 이용하여 아주 간단히 프록시 서버를 구축하여 사용하면 편합니다.

1. CORS Anywhere

CORS Anywhere는 프록시 된 요청에 CORS 헤더를 추가하는 NodeJS 프록시입니다. MIT 라이선스로 자유롭게 사용할 수 있습니다. whitelist, blacklist, rate limit 등의 다양한 설정도 간단하게 할 수 있습니다.

1-1. Repository Fork

cors-anywhere reposiroty를 fork 합니다.

끝입니다. npm install 후 _node server.js_하면 로컬에서 잘 뜹니다. 굳이 해보지 않아도 됩니다. 패스하고 바로 헤로쿠로 가서 배포해봅시다.

2. Heroku 배포

2-1. 가입 및 APP 생성

(계정이 없으면 Heroku에 가입을 하고) Github을 연동합니다. Create new app을 눌러서 app을 생성합니다.

2-2. Github repository 연결 및 배포

Fork 한 repository를 연결합니다.

배포 브랜치 선택 후, 배포합니다.

배포 후, proxy 서버가 잘 뜬 걸 확인할 수 있습니다. 접속 URL는 "[APP이름].herokuapp.com"입니다.

이제 프록시 서버 위에 호출하고자 했던 URL만 붙여서 부르면 됩니다. 만약 https://foo.sample.com을 호출하고 싶으면 아래처럼 호출하면 됩니다.

https://my-simple-proxy.herokuapp.com/https://foo.sample.com

3-3. WHITELIST 설정

CORS Anywhere server.js 소스를 까 보면 환경변수로 WHITELIST를 설정할 수 있게 해 논 걸 볼 수 있습니다.

Heroku 내, Settings > Config Vars에서 환경변수를 설정할 수 있습니다. KEY에 CORSANYWHERE_WHITELIST를 입력하고, WHITELIST 처리할 url을 적어줍니다.

WHITELIST 설정 후, 다른 URL에서 호출해서 테스트해보면 아래처럼 WHITELIST 정책이 적용되어 차단되는 것을 확인할 수 있습니다.

정리

CORS Anywhere와 Heroku를 이용하면 간단히 CORS 프록시 서버를 구축할 수 있습니다.

단 Heroku 무료 계정일 경우 한 달 550시간밖에 사용을 못하고, 30분 이상 Application 사용 이력이 없을 경우 Sleep 모드에 빠집니다. 신용카드 등록 시, 월 1000시간까지 무료로 사용할 수 있지만, 저는 그냥 1) 하루 18시간만 사용하고, 2) 20분마다 self call 하여 sleep 모드에 빠지지 않게 사용하고 있습니다. 귀찮고 대충 사용하고 싶을 경우에는 아래 서비스를 이용하면 됩니다. 30분마다 Heroku를 깨워줍니다.

http://kaffeine.herokuapp.com/

반응형

from http://donggov.tistory.com/132 by ccl(A) rewrite - 2021-10-25 18:26:57