Posts
BUSGO2분

[BUSGO] 공공데이터 API CORS 에러

목차2

처음부터 부딪힌 CORS 에러

버스노선정보나, 실시간 위치나 모든 데이터를 리액트쿼리로 관리하려고 한다.

그래서 아래와 같이 코드를 작성하고 일단 버스노선정보부터 API호출을 해봤다.

코드
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

export const useGetBusInfo = () => {
  const { data, isLoading, error, refetch } = useQuery(
    ['businfo'],
    async () => {
      return await axios
        .get(
          `https://cors-anywhere.herokuapp.com/http://apis.data.go.kr/6410000/busrouteservice/getBusRouteList?serviceKey=${process.env.BUS_DATA_API_KEY}&keyword=6004&origin=http://localhost:3000`,
        )
        .then((res) => {
          return res.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    {
      staleTime: Infinity,
      // refetchInterval: 60 * 1000,
    },
  );

  return { data, isLoading, error, refetch };
};

하지만 포스트맨에서 호출했던 것과는 달리 CORS에러가 발생했다.

서버리스 상태로 프론트에서만 서비스를 만들려다보니 도메인이 맞지 않기 때문에 발생한 것 같다.

CORS에 대한 내용은 아래 포스팅을 참조하자.

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

해결할 수 있는 법은 여러가지가 있었지만, 나는 백엔드 서버를 구축해서 시간표도 DB에 저장할 예정이라 백엔드에서 API호출을 통해 CORS에러를 해결하는 법을 택했다.

Express 서버 구축

Node 🍃 MongoDB와 Express를 이용한 간단한 서버 오픈

Node환경에서 Express와 MongoDB를 통해 간단한 서버를 구축하고 보안과는 크게 관련 없는 서비스라 origin을 모두 열어놨다.

코드
app.use(
  cors({
    origin: true,
    credentials: true,
  }),
);

그 후, 서버에서 다시 axios를 사용해 공공데이터 API를 호출해봤다.

코드
axios
  .get(
    `http://apis.data.go.kr/6410000/busrouteservice/getBusRouteList?serviceKey=${process.env.BUS_DATA_API_KEY}&keyword=6004`,
  )
  .then((res) => {
    console.log(res.data);
  })
  .catch((error) => {
    console.error(error);
  });

문제 없이 잘 호출 됐다! 

서비스 개발하면서 사용 가능한 일일 트래픽이 정해져있니 신경 써서 개발해야겠다. 

반응형