NUA의 개발공부로그

'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

네이버 캠퍼스 핵데이 시작이 얼마 안 남았는데 기술 부채로 인한 문제가 심각하다.. 

대주제는 정해졌지만 소주제는 자유로 적혀 있어서 네이버 Open api를 사용하는 주제를 개인적으로 해보려고 했고,

프로젝트가 시작되기 전에 Vue.js를 써서 lean하게 구현해보려고 했는데, axios로 api를 호출하는 것에서 CORS 정책으로 인해 막혔다.

네이버 api는 타 사용자의 client id와 client secret 를 도용하여 api를 호출하는 것을 막기 위해 서버 프로그래밍을 통해서만 호출하도록 되어 있다.  으악

(https://developers.naver.com/forum/posts/26989)

그런데 프로젝트의 선택 요구사항에 nodejs server framework (express, koa) 혹은 serverless 구성을 택할 것으로 적혀있다.

말그대로 선택사항이라 지킬 필요는 없으나 이왕이면 다홍치마 아니겠는가.

문제는 나한테 서버는 django가 익숙하고, serverless라면 AWS Lambda 같은 것을 얘기하는 것 같은데, 전혀 경험이 없다.

방법은 다음 중에 택하면 될 듯하다.

1. nodejs 서버 프레임워크를 공부한다. 커뮤니티는 express가 크고, koa는 기업 종속성이 낮아 미래가 밝다는 것 같다. 이 방안이라면 더 빠른 구현이 가능한 것을 택할 듯.

2. AWS Lambda나 firebase에서 함수 기반으로 해결이 가능하다면 해당 플랫폼 사용.

3. axios.get 의 경우에,  JSONP 이라는 것으로 해결이 된다는 얘기가 있어 가장 우선적으로 시도해볼 것임 -> html 문서의 script 태그는 보안정책에 적용되지 않는 점을 이용한 것 -> (05.15 추가) 서버 측에서 JSONP 형식을 지원해야 하는 단점이 있어 범용적으로 사용하기 어렵다.

4. 프록시? -> (05.15 추가) 1번과 동일한 방법. 프록시 서버를 구축하는 것.

해커톤 시작되기 전에 빨리 공부해야지..

(참고: https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu)