2019/09/25 TIL(Today I Learn) - 크로스 도메인 요청 CORS

September 25, 2019
2 minute read

얼마전 코드스테이츠 세션에서 자바스크립트로 만들 수 있는 것들을 알려주었다.
웹 어플리케이션 부터 머신러닝, 아두이노까지 자바스크립트가 할 수 있는 것이 무궁무진했는데, 나는 그 중에서 클로바 익스텐션을 만들어 보고 싶었다.

예전부터 생각해둔 게 있어서 공공 데이터 포털에 들어가 무작정 버스 API 사용 신청을 했고, XMLHttpRequest로 자료를 요청하는 테스트를 진행했다. 그리고 CORS_{Cross Origin Resource Sharing} 크로스 도메인 요청 오류를 만나게 됐다.

간단히 설명하자면, 내 웹페이지와 API의 서버가 다르기 때문에 자료를 요청할 수 없다는 것이다.

자바스크립트의 표준 스펙에는 다른 출처(서버)로의 요청을 허용하지 않는 동일 출처 정책_{Same-Origin Policy}이 있는데, 이 정책이 API를 사용하는 데 불편함을 유발하다보니 크로스 도메인을 허용하는 CORS 정책이 추가됐다고 한다. 하지만 그럼에도 공공 API 자료는 요청할 수 없었던 거다.

https://brunch.co.kr/@adrenalinee31/1

이를 해결하는 방법으로 API를 제공하는 서버 쪽에서 모든 도메인을 허용하도록 '응답 헤더'를 추가할 수 있지만, 공공 API의 서버를 수정할 수는 없기에 가능한 방법이 아니었다.

Ajax를 통한 우회 방법인 xdomainajax 라이브러리와, AJAX Cross Origin 플러그인도 사용해봤지만 성공하지 못했다.

그리고 계속해서 해결책을 찾기 위해 검색을 하다가 공공 데이터 포털의 질문글을 보게되었다. https://www.data.go.kr/information/QNA_0000000000014129/qna.do

관리자 답변의 자료에 따르면 문서가 API 서버와 직접 통신을 하지는 못하고, 동일 도메인 내 서버가 API 서버와 통신을 하며 자료를 문서에 넘겨 주는 방식으로 개발해야 한다는 내용이었다.

결론

공공 API는 Ajax나 jQuery로 우회해서 사용 불가
동일 도메인 내 서버를 통해 API 서버와 통신할 수 있음
즉, 공공 API를 사용하려면 서버 사이드 언어를 알아야 함
내 토이프로젝트는 까마득히 오래 걸릴 것 😂

결국 나는 node.js를 배워서 서버를 만든 뒤 API를 이용하기로 했다.
당장 실험을 해보고 싶어 node.js로 공공 api 사용 방법을 공유한 포스팅을 보고 따라 해봤다.

https://codevkr.tistory.com/34

⬇︎ 경기도 정류소조회서비스 API에서 좌표기반 근접 정류소를 조회한 결과다.

더 읽어볼 거리 & 참고 문서

localhost에서는 CORS 요청이 안될 수 있단 내용 참고
https://www.zerocho.com/category/NodeJS/post/5a6c347382ee09001b91fb6a

HTTP 접근 제어 (CORS)
https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS

AJAX Cross Origin 사용 방법
https://infotake.tistory.com/88