[google cloud function] - Open Api Proxy

다시 오랜만에 블로그를 쓴다.. 이제 진짜 일주일에 하나는 쓰도록 하자 ㅠㅠ

최근 회사 사이트 툴을 개발하면서 한가지 문제가 생겼다..

관세청 open api를 이용해서 만드는 기능 이었는데... 하... 이놈의 CORS에러를 또 맞딱드렸다..

사이트 백엔드 cors는 백엔드에서 설정을 바꿔주면 되는 편안함이 있지만..

third part api를 이용할 때는 이야기가 달라진다.

왜냐 해당 api를 가진 서버에서 Access-Control-Allow-ORigin을 허용해주지 않으면 답이 없기 때문이다.

공공기관에서 해줄리가 만무 하지 않은가...

 

여기서 잠깐 CORS란 무엇인가.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

mdn에 따르면 교차출처 리소스 공유는 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 해주는 브라우저에서 알려주는 체제이다.

web은 자신의 domain, protocol, port와 다를때 cors http요청을 실행한다.

예를 들어 http:localhost:3000 의 프론트 엔드가  http:localhost:5000의 서버에 요청을 하는 경우

보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 http요청을 제한한다.

XMLHttpRequest와 Fetch api는 cors 정책을 따른다. ... 등등등!!

 

자세한건 mdn을 잘 확인해 보자.

 

자 잘 알겠다.. 그럼 어떻게 해결해야 하는가! 이cors는 브라우저 정책이기에 백엔드서버나 postman같은 api platform에서는 문제없이 작동 하는것이다.

그럼 어떻게 해야하는가? 구글링을 해본결과 proxy서버를 하나 띄워서 하는 방법이 있겠다..

뭐 개발 단계에서는 cra를 쓰는경우

 

package.json에  proxy를 설정해서 해주면 개발은 무리없이 진행이 되지만

빌드 배포 후에는 이게 적용이 안된다. 전혀...

 

이제 다른 방법은 따로 express서버를 하나 띄우던가... 굳이? backend가 있으니 그냥 backend에서 프록시 역할만 해서 openapi치고 결과만 res를 다시 돌려받기만 하면된다.. 근데 회사에서... 안된다고 한다... 왜 !! 왜 !!

 

기능은 하루만에 끝났는데 이놈의 cors때문에 3일을 골치가 아팠다.. nginx에서 reverse proxy를 설정해야 하는가?

근데 필자는 아직 nginx를 잘 모른다.. 괜히 nginx로 proxy 설정했다가 global로 적용되서 모든 api가 적용되면 엄청난 파장이

일어날 것이기에 패스...

 

그럼..... !!!! google cloud function을 이용해보자!!  필자의 회사는 gcp를 이용하고 있다.

클라우드에서 제공하는 기능 중에 function을 만들어서 배포 후 해당 url을 가지고 호출을 할 수가 있다.

그럼 브라우저에서 요청하는게 아닌 서버? 에서 요청 후 프론트로 다시 돌려주는 것이기에 프록시의 역할을 해낼 수 있을 듯 했다.

 

https://cloud.google.com/functions/docs/writing/http?hl=ko 

HTTP 함수  |  Cloud Functions 문서  |  Google Cloud

자 위 링크를 타고가서 보면 http함수를 만드는 방법이 있다.

 

자세한건 위를 보고... 우선 함수를 하나 생성 하고서

내가 사용할  package를  package.json에 써주자.

그리고 소스코드를 작성해주고 배포해주면 끝난다..

해당 openapi가 불친절하게도 수출데이터 수입데이터를 한번에 보내주진 않아서 두번 요청한다 ㅠㅠ

 

아! 한가지 주의 할 점은 여기서도 cors 에러가 발생할 수 있으니 response header에ㅓ access -control-allow-origin을 설정해주자 필자의 경우 로컬, dev도메인, 운영도메인 이렇게 세개의 origin이 필요해서 그렇게 설정했다.

 

하 cors는 좀 거시기 했다 아무튼 잘 해결되었으니 마무리!