🤔Problem

react vite만든 웹을 Vercel로 배포 했는데 Mixed content 에러가 났다.

이유를 찾아보니 도서관 정보를 가져오기 위해 사용했던 api 주소가 http로 시작하고 배포는 https이기 때문에 난 것이었다.

🧐Try to solve

  1. 해결을 하기 위해 구글링을 하니 아래와 같은 코드를 넣으면 가능하다고 했다.

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

    넣으니 이번에는 :ERR_SSL_PROTOCOL_ERROR 에러가 났다.

    결론적으로 봐서 강제로 https로 받아오게해서 보안에 문제가 생겨나는 에러같다. 그럼 이 방법은 영구적인 해결방법이 되지 못한다고 판단하였다.

  2. Serverless 사용

    루트 위치에 api폴더 만들고 api호출 파일 생성

    //api>library.js
export default async function handler(req, res) {
  try {
    const response = await fetch(
      `${BASE_URL}`
    );

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    const data = await response.json(); // 응답을 JSON으로 변환dd
    res.status(200).json(data); // 데이터를 클라이언트로 반환
  } catch (error) {
    res
      .status(500)
      .json({ message: "Error fetching data", error: error.message });
  }
}

    api 사용

     const loadLibraries = async () => {
      try {
        const res = await fetch("/api/library");
        const data = await res.json();

        setLibraries(data.SeoulPublicLibraryInfo.row);
      } catch (error) {
        console.error("Error loading libraries:", error);
      }
    };

    loadLibraries();

  }, []);

🧙🏻Result

에러 없이 잘 데이터가 불러와진다.

💡Learned