[cors-anywhere] 나만의 프록시 서버를 만들어보자

[cors-anywhere] 나만의 프록시 서버를 만들어보자

개발을 하는 사람이라면 흔하게 사용해보는 것이 공공데이터포털에서 제공하는 오픈API이다.
그리고 또 흔하게 겪는것이 CORS 에러이다.

나 또한 회사 업무중에 javascript fetch api로 호출을 해야 할 때 겪게 되었다.

CORS란 Cross-Origin Resource Sharing, 교차 출처 리소스 공유이다.
쉽게 말하여 다른 서버에서 HTTP 요청을 보내고, 이를 허용하지 않았기 때문에 200 이더라도 내가 원하는 응답 값을 받지 못한 것이다.

로컬 환경에서의 개발을 할 때는 프록시 서버를 이용하여 이를 피할 수 있다.
프록시 서버는 요청과 응답 사이, 즉 클라이언트와 서버 사이에서 헤더 추가 또는 요청 허용, 거부하는 역할을 해줄 수 있다.

따라서 프록시 서버를 사용해 CORS가 허용된다는 의미인 Access-Control-Allow-Origin: * 헤더를 추가해주어 응답받으면 된다.

cors-anywhere을 사용해보자.

cors-anywhere은 프록시 된 요청에 CORS 헤더를 추가해주는 NodeJS 프록시이다.

흔히 오픈되어 있는 프록시 서버들이 있지만 cors-anywhere과 Heroku를 이용해 나만의 프록시 서버를 만들어보자.

1. fork repository

• cors-anywhere github에 접속하여 해당 프로젝트를 내 repository로 fork한다.
  • 

2. Heroku 가입

• heroku에 가입/접속 후 설정 화면에서 내 Github과 연동한다.
  • 

3. app 생성

가입 후 깃허브 연동을 마쳤다면 프록시 서버를 만들어보자.

• 메인화면 좌측 상단의 New - Create new app을 선택한다.
  • 
• App name을 설정하고 Create app을 선핵한다.
  • 
• Deployement method에 Github을 선택하고
  • 
• Connect to Github에서 fork한 repository를 검색하여 연결한다.
  • 
• 하단에 추가로 나오는 Branch 설정들은 따로 건들이지 않았기에 그대로 둔다.
• 마지막으로 Deploy Branch를 선택해 마무리한다.
  • 
• 빌드가 마무리되면 View를 선택해 확인해보자.
  • 

4. 확인 후 사용하기

• View를 선택하면 https://[appName].herokuapp.com라는 경로로 접근한다.
  • 
• 이후에 CORS error가 발생하던 요청 URL을 https://[appName].herokuapp.com/[요청URL]의 형태로 작성 후 요청하여 정상적인 응답을 받는다.

5. 끝!

항상 골치아프던 CORS이다.
CORS라는 정책을 만든 이유는 있겠지만 사실 로컬 개발하는 용도에서 따로 서버까지 두며 사용할 여건이 안될때 충분히 사용할만 한것같다.

당연하지만 배포 서버에 띄울때는 프록시 서버를 직접 구축해서 사용하자..!