[Resthub#개발일지8] 공공데이터 API CORS 오류 해결

공공데이터 API를 이용하여 추천 레시피를 개발하다가 오류를 발견했다.
찜한 목록에서 각각의 레시피를 불러올 때 제대로 불러오지 않는 현상이 발생했다.
(그간 1~2개로만 테스트를 해봤을 때는 잘 떠서 오류를 확인을 못했었다.)

3개의 레시피를 불러와야하는데 현재 2개의 레시피만 불러오고 있다.

네트워크를 확인해보니 불러와지지 않은 레시피는 CORS 오류가 뜬 것을 확인할 수 있다.

그런데 공공데이터 API는 인증키만 필요할 뿐 오픈되어있기 때문에 CORS 오류가 일어날 일이 없는데.. 왜 발생하는지 의문이 들었다.

우선 CORS를 해결하기위해 기본적으로 백엔드에서 처리하는 것이 바람직하지만 공공데이터이므로 프론트에서 임시로 처리하기 위해 Proxy설정을 할 수 있다.

vite.config.ts에서 Proxy 경로를 설정한다.

export default defineConfig({
	plugins: [react()],
	server: {
		port: 3000,
		proxy: {
			"/api": {
				target: "https://openapi.foodsafetykorea.go.kr",
				changeOrigin: true,
				rewrite: (path) => {
					return path;
				},
				secure: false,
				ws: true,
			},
		},
	},
});

그리고 기존 API 요청 코드를 /api 로 수정해준다.

Access-Control-Allow-Origin: * 으로 웹 페이지가 원격 서버의 리소스에 접근하는 것을 허용하도록 바꿔주었기 때문에 CORS 오류가 뜨지 않는 것을 알 수 있다.

하지만 데이터를 못 불러오고 있다.
응답값을 확인해보면 현재 접속 중인 인증키라고 하면서 잠시 후 다시 시도하라고 나와있다.

cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "OPTIONS"],
},

공공데이터 API가 에러난 값(제대로 불러오지 못하는)에는 CORS를 주지 않는지 가설을 세우고 임시로 vite.config.ts에 넣어서 입증을 해본다.

응답 헤더가 바뀐 것을 볼 수 있다.

그러므로 서버에서 제대로 불러오지 않는 값에 대해 cors를 주지 않아서 cors로 인해 생긴 오류처럼 보인 것이다.

그렇다면 다른 가설을 세어보자.

이전에 1~2번 불러올 때는 제대로 불러와지는데 그 이상부터는 제대로 불러오지 않는다.
공공 API에서 요청을 짧은 시간내에 여러번 받을 수 없는 거 같다

그래서 로직을 바꿔서 해당 레시피의 상세보기를 눌렀을 때만 API 요청하도록 변경했다.

	레시피 찜할 때 저장 정보	레시피 불러올 때
변경 전	유저, 레시피명	찜한 목록의 모든 레시피를 API 요청해서 정보 가져옴
변경 후	유저, 레시피명, 이미지, 재료	특정 레시피 상세 정보 클릭시 API 요청

API를 한 번에 호출하지 않고 필요할 때만 호출하도록 변경했더니 제대로 레시피 정보를 가져오는 것을 확인할 수 있었다.