목차
반응형
처음부터 부딪힌 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에 대한 내용은 아래 포스팅을 참조하자.
해결할 수 있는 법은 여러가지가 있었지만, 나는 백엔드 서버를 구축해서 시간표도 DB에 저장할 예정이라 백엔드에서 API호출을 통해 CORS에러를 해결하는 법을 택했다.
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);
});
문제 없이 잘 호출 됐다!
서비스 개발하면서 사용 가능한 일일 트래픽이 정해져있니 신경 써서 개발해야겠다.
반응형