[220602] TIL

릿·2022년 6월 2일
0

TIL

목록 보기
24/28

📃 삽질일지

📔 개인과제

1. openAPI를 추가로 사용하기

기존에 가지고 있는 API만 쓰기에는 너무라도 빈약하다.
오름정보로 카드를 만들려고 하니 오름 이름, 표고, 위치 끝...
뭐 사진이라던지 요약 설명이라던지 휴식년인지 아닌지 정도는 넣어줘야 할 것 같아서 다시 공공데이터포털로 들어가본다.

일단 이만큼 신청해놨는데 오름현황, 제주 도보여행 탐방객 데이터 구축사업정도 쓸 것 같고 제일 알짜인

이걸 쓰고 싶은데 활용신청하는 란이 없는 것이다...
일단 첨부된 문서보면서 무작정 서비스키 넣었다가 뺐다가 하면서 API호출은 하고 있는데

계속 AxiosError가 뜸.
근데 자료가 xml로 요청이 가길래 이상하네...이 API는 json인데 싶어서 json으로 바꿔서 API를 요청했더니

cors에러가 떴다...
아 신난다!ㅎㅎㅎㅎㅎㅎㅎㅎㅎ

디버깅 1: request데이터 종류 문제?

JSON API니까 먼저 XMLHttpRequest부터 어떻게 해보자 싶어서 검색했더니

-라고 뜬다.
모든 데이터를 가져올 수 있다니 내가 너에 대해 크게 오해했구나. 미안하다...ㅠ

디버깅 2: 인증키의 문제?

인증키가 있고 없고에 따라서 에러 메시지가 어떻게 뜨는지 보고 싶어서 기존의 오름현황 API를 요청했고, 요청할 때 서비스키를 빼고 요청을 진행했다.

엥? 이렇게 친절하게 에러메시지를 보내준다고?...ㅋㅋㅋㅋ
그럼 어쩌면 서비스키가 필요없는 API일지도 모르겠다.
지금이 아침이 아니라서 다행이다...
(오늘 이미 공공데이터포털에 항의글을 남긴 1인 🙋‍♀️ + 내일 제주도청에 항의전화하려고 했던 1인 🙋‍♀️)

디버깅 3: CORS에러란?

이전에 한번 동아리 프로젝트를 진행하면서 CORS에러를 본 적이 있는데 그건 내가 request데이터 타입에 오타를 내서 생긴 에러였다.

자세히 보니까 에러메시지도 있었다. 니가 뭔데 날 차단해?ㅠ

https://xiubindev.tistory.com/115
마침 위의 블로그에서 똑같은 에러메시지에 대한 답이 있어서 서술해보자면

CORS는 서로 다른 출처(Origin)간에 리소스를 전달하는 방식을 제어하는 체제이며 CORS요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다.

-라고 블로그에 적혀있었다.


이대로 진행해보기로 한다!

디버깅 3: 프록시서버를 사용해서 우회하기

블로그에서 봤던 것처럼 프록시서버를 앞에 적어줬다.

const BASE_URL = 'https://cors-anywhere.herokuapp.com/https://gis.jeju.go.kr/rest/JejuOleumVRImg/getOleumRDetailList'


403에러가 떴다.

내 요청이 거절되었단다... 왜때문에?ㅠ

디버깅 4: 크롬 확장프로그램 Allow CORS: Access-Control-Allow-Origin깔기

멘토님이 세팅해주셨던 파일 전부 삭제하고 직접적으로 axios로 api를 요청해보기로 한다.
그러던 와중에 네트워크탭에 cors에러난 부분에서 뉴탭열기를 눌러봤더니

오? 이거 진짜 cors에러만 해결하면 쓸 수 있을 것 같다ㅠㅠ...
약간의 희망을 보았다.

어느 블로그에 크롬 확장프로그램인 Allow CORS: Access-Control-Allow-Origin을 깔면 cors에러가 해결된다길래 깔아봤더니
...응. 안돼ㅠ


어, 근데 자세히 보니 사전요청은 성공했네?

일단 오늘은 여기까지ㅠ

profile
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자

0개의 댓글