프로그래밍 공부 노트

프론트단에서 공공데이터 포털에서 제공해주는 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 데이터를 제공해주기 때문에 변환이 필요했다. 이부분은 라이브러리를 사용해서 변환할 수 있었다.

[React] CORS 이슈 , Proxy 설정하기 client 와 server 가 사용하는 포트가 다를때 Cross-Origin Resource Sharing 즉, CORS 이슈가 발생한다. Cross-Origin Resource Sharing (CORS) Cross 는 정보의 이동을 뜻하고 Origin 은 client와 server 각각을 의미한다. Resource 는 말그대로 자원 즉, 데이터를 말하며 Sharing 은 공유를 말한다. 즉, client와  server 간의 데이터 공유에 있어서 발생하는 보안 문제점에 관한 정책이다. 한국어로 교차 출처 리소스 공유라고 하며 교차 출처 자원 공유는 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 특정한 도메인간의 요청 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다. 예시를 들어보면  1) Web Docment    -------------------------> Web Server (domain-a.com)                                                 (domain-a.com) 둘은 Same-origin requests이기 때문에 항상 허용되지만 2) Web Docment    -------------------------> Web Server (domain-a.com)                                                 (domain-b.com) 둘은 Cross-origin requests이기 때문에 CORS 정책에 의해 컨트롤 된다. 나의 경우 프로젝트를 할때  client 쪽은 리액트를 사용하여 3000번 포트를 사용하고 있었고 server 쪽은 nodejs 를 사용하여 구성했는데 5000번 포트를 사용하고 있어서 client 쪽에서 요청을 보내더라도 server와의 포트가 다르기 때문에 요청에 대한 응답을 제대로 받을 수 없었다. 해결방법으로 http