[TIL.10] 공공데이터open API. 리액트 로컬 작업 교차브라우저 cors 에러 해결 방법 proxy설정

전 직장의 백엔드 동료도 그렇고 지난번 자바스크립트 강사님도 그렇고 주변에서 개발관련 일을 하는 분들이 공공데이터를 활용해서 뭐든 만들어보라고 추천해주셔서 이번에 리액트를 배우는김에 개인프로젝트를 뭘 해볼까...?하다가 공공데이터중에 유기동물 정보를 제공하는 api가 있어서 이를 활용해서 뭔가를 만들어보기로 결심했다.

 

시작부터 엄청난 난관에 부딪쳤다...ㅠ

 

리액트에서 api데이터를 불러올때는 fetch나 axios를 쓰는데 이 둘중에 대부분 axios를 더 선호해서 axios를 설치하고 useEffect를 사용해서 api를 요청했다.

 

 

결과는 아무것도 뜨지 않음.....

 

your site has been blocked by CORS policy: No "Access-Control-Allow-Origin' header is present on the requested resource

 

 

 

CORS가 무슨 에러인가 하고 한참 찾아봤는데 교차브라우저 제한으로 인한 에러라고 한다.

에러 내용에 써있는것처럼 서버의 header부분에 Access-Control-Allow-Origin 옵션이 있어야 한다고하는데...

아ㅠ... 코린이 쭈그리인 제가 공공데이터를 막 그렇게할 권한이 있을리 없잖아요..................

 

그래서 또다시 열심히 구글링을 해서 찾아낸 방편이 바로 proxy우회로 접근하는 방법이고 프록시우회 방법도 몇가지가 있는 것 같은데 그중에 제대로 구현된 http-proxy-middleware를 사용한 방법을 정리하려고 한다.

 

 

• http-proxy-middleware 설치

 

yarn add http-proxy-middleware

 

 

 

 

• setupProxy.js 생성

 

http-proxy-middleware를 설치한뒤에는 리액트 프로젝트 src폴더 하위에 setuproxy.js파일을 만들어준다

 

 

 

참고로 버전에 따라 프록시미들웨어를 사용하는 방법이 달라서 만약 나처럼 했는데 제대로 적용되지 않는다면 버전별로 사용법이 다르니 잘 찾아봐야할 것 같다. 특히 6번째줄!

 

셋업프록시 파일은 지금 작업중인 이 프로젝트 내에서 타겟에 적혀있는 주소를 String변수 '/api'로 사용하겠다고 설정한 것이라 보면 될 것같다

 

 

• url수정

자, 이제 다시 api를 요청하는 컴포넌트에 가서 코드를 수정해준다

셋업프록시로 설정한 주소 그 뒷부분부터 url을 설정하고 

axios.get('/api' + url) 으로 요청한다

 

이렇게 하고 다시 실행해보면

 

짠! 공공데이터 open api호출 #성공적

 

일단 이렇게 하면 로컬에서 프로젝트 작업을 하는데는 문제가 없어서 디자인이랑 컨셉이랑 이것저것 확정되는대로 조금씩 수정해가면서 작업할 수 있을 것 같다.  

 

그런데 이걸 또 서버에 올리면 CORS문제가 다시 발생한다.

다른사람들한테 아이디어도 얻고, 포폴에도 가시적으로 보이는게 좋을 것 같아 깃헙.io에 올리려고 했는데 또 똑같은 문제로 데이터를 불러오지 못했다.... 따지고 보면(아마도?) 같은 이유이긴한데 보안상의 문제로 https에서는 http로의 호출이 제한된다고 한다. 하지만 공공데이터에서 제공하는 api는 대부분 http이고 위에 쓴것처럼 현재 공공데이터중에는 header에 Access-Control-Allow-Origin 옵션이 설정되어있지않은 것들이 상당히 많다. 이런 문제때문에 공공데이터 사이트에 가보면 브라우저 호환 기능을 지원해달라는 문의가 꽤 많은데... 많은데.... 음... ... ... 그렇다.... 할많하않......

 

 

 

그나저나... 우리나라는 진짜 하루에도 수십마리씩 유기동물들이 쏟아지는 구나.....ㅠ

 

 

 

 

 

 

---

공부하며 정리하는 초보 개발자입니다.

포스팅 내용에 잘못된 점이나 더 좋은 방법이 있다면 댓글로 알려주시면 감사하겠습니다 :)