CORS 에러 해결 하기- 알라딘API/ 보완 사항

알라딘 API를 사용해서 프로젝트를 진행하는데 CORS 에러가 생겼다. 

 

개발 할 당시에는 CORS 확장 프로그램을 사용하여서 문제가 안생겼는데

 

배포를 하려니 상당히 거슬려서 어떻게하면 해결할 수 있는지 찾아봤음. 

 

직접 API를 호출하면 제약이 발생하고, EXPRESS 서버를 도입하여 백엔드 서버를 거친 후 요청/응답이 이루어지도록 했다.(CORS 미들웨어)

---

 

 일단 테스트로 만든 곳에서 동작하는것은 확인했다. 

 

이제BookMarket에 적용하면되는데,

 

서버를 express  폴더에 

npm init-y 로 package.json 생성 후 

라이브러리들을 설치한다. 

설치 완료되면 

server.js 를 만들어서

안에 api를 불러올 수 있도록 

코드를 짠다. 

// backend/server.js

const express = require("express");

const app = express();

const PORT = 5000;

app.listen(PORT, () => {

  console.log(`http://localhost:${PORT} 에서 서버 실행중`);

});

 

테스트할거임

그리고 package.json에서 쉽게 실행할 수 있도록

  "scripts": {

    "start": "node server.js"

  },

 

 

start 를 node server.js로 변경해주고 

 

터미널로 실행한다. 

 

휴;; 이제 실제 프론트엔드랑 연결해야함

 

 

server.js (back)

// 베스트 셀러/신간 리스트 조회

app.get("/ItemList", async (req, res) => {

  //쿼리 값 받기

  const { queryType } = req.query;

  const aladinApiUrl = `https://www.aladin.co.kr/ttb/api/ItemList.aspx?ttbkey=${process.env.BOOK_API_KEY}&QueryType=${queryType}&MaxResults=10&start=1&SearchTarget=Book&output=js&Cover=Big&CategoryId&Version=20131101`;

  try {

    // 알라딘 서버에 검색 요청

    const response = await axios.get(aladinApiUrl);

    const data = response.data;

    const result = data.item;

    // 응답을 받으면 클라이언트에게 전달

    if (result) {

      res.status(200).json(result); // Sending 'result' as JSON response

    }

  } catch (err) {

    console.log(err);

    res.status(500).send("Internal Server Error");

  }

});

 

이런식으로 쿼리 타입은 베스트 셀러인지 , 신간리스트인지 , 뭐 블로그 추천 리스트라던지 그런 옵션들을 넣어서 

 

 

front 

import axios from "axios";

//axios에 미리 백엔드 앞부분 주소를 저장한다.

export default axios.create({

  baseURL: "http://localhost:5000",

});

 

 

 

 

api 호출할 코드를 hook으로 만들어서 사용했다. 

import { useEffect, useState } from "react";

import apiClient from "../utils/api-client";

const useData = (endpoint, customConfig, deps) => {

  const [data, setData] = useState([]);

  const [error, setError] = useState("");

  const [isLoading, setIsLoading] = useState(false);

  useEffect(

    () => {

      apiClient

        .get(endpoint, customConfig)

        .then((res) => {

          setData(res.data);

          setIsLoading(false);

        })

        .catch((err) => {

          setError(err.message), setIsLoading(false);

        });

    },

    deps ? deps : []

  );

  return { data, error, isLoading };

};

export default useData;

 

 

그리고 BestSeller 컴포넌트는 프롭스로 type을 받아오는데 

이 타입이 위에서 언급했던 쿼리타입이다. 

 

const BestSeller = ({ type }) => {

  const { data: bestSeller, error } = useData(`/ItemList?queryType=${type}`);

 

 

이 타입을 useData에 넘겨주면 

server.js에서 "ItemList"로 끝나는 url을 가져와서 알라딘 api에서 데이터를 가져와 front로 전달한다.

 

그 데이터를 BestSeller 컴포넌트에서 받아서 

 

data:bestSeller라는 변수로 받아서 출력해주면 

 

 

다른 부분들도 위와 같이 수정하면 된다 ㅠ.,

 

 

---

https://inthedev.tistory.com/55

[React] Express로 CORS 에러 해결하기

 

 

https://github.com/FRONTENDSCHOOL7/Double-Check?tab=readme-ov-file

GitHub - FRONTENDSCHOOL7/Double-Check

https://reese-dev.netlify.app/issue_archive/aladin_cors/

알라딘 Open API CORS 이슈 해결

 

 

 

vite 에서 서버 환경 만들기 

https://blog.illustudio.co.kr/todo-list-front-to-back-3/

 

 

---

보완 사항

- 처음 서버 시작 시 데이터를 받아오는데 시간이 오래걸림 

그래서 await로 로딩 시간동안은 로딩화면 보여주는게 맞지 않나 싶음.