[API오류] type:"cors" 오류

문제발생 : 

공공API를 활용하여 미세먼지 알리미를 만드는 도중에

API 요청을 통해 데이터를 받아오려고 하였으나, type 부분에 "cors"로 설정되어 

데이터를 가져오지 못하였다. 

 

주의사항:

해당 오류는 type이 cors라고 되어있기 때문에 CORS오류라고 착각할 수 있으나,  

그것과는 조금 다르다. 

 

 

 

 

위의 오류를 발생시킨 잘못된 코드 

 

const Weather = () => {
  const [isLoading, setIsLoading] = useState();
  const API_KEY = process.env.REACT_APP_API_KEY;
  const url = `https://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?serviceKey=${API_KEY}&returnType=json&numOfRows=100&pageNo=1&sidoName=경기&ver=1.3`;
  useEffect(() => {
    fetch(url).then((response) => {
      return console.log(response);
    });
  }, [url]);
  return <p>웨더</p>;
};
export default Weather;

 

useEffect안에서 그냥 fetch를 하고 난 뒤 response를 console.log하였으나 정상 작동 되지 않았다. 

 

 

이 값은 첫 번째 확장시에 평가되었습니다. 이 값은 그 이후에 변경될 것입니다... 

 

 

json으로 변경하지 않아서 오류가 난 것인가 하고 json으로 변경하여 console.log하여 보았다. 

 

response.json()으로 수정한 코드 

const Weather = () => {
  const [isLoading, setIsLoading] = useState();
  const API_KEY = process.env.REACT_APP_API_KEY;
  const url = `https://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?serviceKey=${API_KEY}&returnType=json&numOfRows=100&pageNo=1&sidoName=경기&ver=1.3`;
  useEffect(() => {
    fetch(url).then((response) => {
      return console.log(response.json());
    });
  }, [url]);
  return <p>웨더</p>;
};

 

 

console log화면

 

 

 

 

 

 

async await로 작동해본 코드 

 

import { useEffect, useState } from "react";

const Weather = () => {
  const [isLoading, setIsLoading] = useState();
  const API_KEY = process.env.REACT_APP_API_KEY;
  const url = `https://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?serviceKey=${API_KEY}&returnType=json&numOfRows=100&pageNo=1&sidoName=경기&ver=1.3`;
  useEffect(() => {
    const fetchApi = async () => {
      const res = await fetch(url);
      const data = await res.json();
      console.log(data);
    };
    fetchApi();
  }, [url]);
  return <p>웨더</p>;
};
export default Weather;

 

console.log 화면

 

 

 

여기서 Promise then과 async await의 응답이 조금 다른 것을 알 수 있었다.

그것은 Promise라는 프로토타입의 객체를 상속받았기 때문? 인것 같은데 나중에 좀더 공부해봐야겠다.. 

 

 

 

결론 : 

url부분의 파라미터에 json으로 요청한것으로 된 줄 알았지만 

가져온 데이터를 다시 json으로 변경해야 했다.