크로스 도메인 CORS 에러 문제 해결(공공 데이터 포털)

프론트단에서 공공데이터 포털에서 제공해주는 OPEN API를 바로 요청해서 사용하려고했는데 해당 오류가 발생했다.

API KEY만 삭제한 오류 내용:

Access to XMLHttpRequest at 'http://apis.data.go.kr/B552584/EvCharger/getChargerInfo?serviceKey=${API KEY}&numOfRows=5&pageNo=1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

자바스크립트의 표준 스펙에는 다른 출처(서버)로의 요청을 허용하지 않는 동일 출처 정책(Same Origin Policy)이 있다.

도메인, 서브도메인, 프로토콜, 포트가 다른 곳에서 요청을 보내는경우 발생한다.

브라우저에서 다른 서버에 요청할 경우 해당 정책이 적용되지만 브라우저를 거치지않고 서버간의 통신에서는 해당 정책이 적용되지 않는다.

사진으로 간단히 그려봤다.

찾아낸 해결방법이 Node.js로 서버 통신을 통해 API 데이터를 받을 수 있다는 것이었다.

다행히도 Node.js를 공부했었어서 데이터를 받아오는데는 쉬웠지만 JSON이 아닌 XML 데이터를 제공해주기 때문에 변환이 필요했다.

이부분은 라이브러리를 사용해서 변환할 수 있었다.