「tip」공공데이터API CORS 연결하기

 

프론트-프론트에서 공공데이터를 받아야 할 때,

CORS문제가 발생한다면 allOrigins로 해결할 수 있다.

 

All Origins

 

프록시로 CROS문제를 해결해주는 라이브러리는

CORS Anywhere, HTMLDriven을 비롯하여 다수 존재한다.(구글링)

 

allOrigins는 jsonP를 활용하는 방식이며,

xml방식을 json으로 변환하는 메서드와 함께 프로미스 방식으로 코드가 깔끔하다.

 

 

 

 

 

소스코드

<h2 data-ke-size="size26">공공데이터</h2>
<input class="btn btnData" style="width: 200px; color: #181818; margin-left: 35%;" type="button" value="공공데이터 받기(클릭)" /><br /><span></span>

<script>
let contents = document.querySelector('#contents')
let thisUrl = 'http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcLandTrade?LAWD_CD=11110&DEAL_YMD=201512&serviceKey=92fOjG0i34%2B%2FcnKSh%2FUjvxl0QyeNIGbNxsd%2BgmE3xnMpSoyChVkq%2FBoZKgx%2FUR8uaABNhgwyOZGBK34js%2FPNiQ%3D%3D'
let btnData = document.querySelector('.btnData');
    btnData.addEventListener('click',()=>{
    	fetchData(thisUrl,contents);
    })


function fetchData(url,el){
	//fetch를 활용한 allOrigins방식 사용
	fetch(`https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`)
		.then(response => {
			if (response.ok) return response.text(); //.json(), .blob()사용가능
			throw new Error('Network response was not ok.')
		}).then((data) => {

    	let jsonData = xmlToJSON.parseString(data); //xml파일을 json으로 변환
    	let vuJson = prettyPrintJson.toHtml(jsonData); //json파일에서 텍스트를 html태그로 변환
    	el.innerHTML = vuJson;
	});
}

</script>

 

fetchData함수에서 프로미스의 첫번째 반환값 'response'는

response.text()

response.json()

reponse.blob()

으로 파싱을 할 수 있다.(allOrigins웹사이트에 기재)

 

만일 json파일로 변환을 해야한다면,

아래의 xmltojson, pretty-print-json CDN을 이용하자.

 

https://openbase.com/js/pretty-print-json

pretty-print-json: Docs, Tutorials, Reviews | Openbase

https://github.com/SummersRemote/xmlToJSON

SummersRemote/xmlToJSON

 

 

 

 

 

결과

공공데이터