TIL -2024-02-04 [Network,glich practice, CORS]

[Sewoni]

🍋TIL - 2024-02-04-Tuesday

📚 오늘의 학습

• 🍀 주요 학습 내용 1: 네트워크 요청
  Fastify, fetch, async/await, axios
• 🍀 주요 학습 내용 2: glitch 를 통한 Gemini 를 이용한 웹사이트 배포.

const path = require("path");  // path 모듈을 불러와서 파일 경로 관련 작업을 할 수 있게 함
const axios = require('axios');  // axios를 사용해 HTTP 요청을 보내기 위해 불러옴

const fastify = require("fastify")({
  logger: true,  // Fastify 서버에서 로깅 기능을 활성화하여 요청과 응답을 로그로 출력할 수 있게 함
});

fastify.get("/", async function (request, reply) {  // 루트("/") 경로에 대한 GET 요청을 처리하는 엔드포인트 정의
  const { GEMINI_KEY } = process.env;  // 환경 변수에서 GEMINI_KEY 값을 읽어옴
  
  if (!GEMINI_KEY) {  // 만약 GEMINI_KEY가 환경 변수에 없으면
    return reply.status(500).send({ error: "GEMINI_KEY 환경 변수가 설정되지 않았습니다." });  // 500 에러와 함께 메시지를 반환
  }

  console.log("GEMINI_KEY:", GEMINI_KEY);  // GEMINI_KEY 값을 로깅

  const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${GEMINI_KEY}`;  // API 요청을 보낼 URL 생성 (GEMINI_KEY를 포함한 URL)

  try {
    const response = await axios.post(url, {  // POST 요청을 보내서 API로부터 데이터를 받아옴
      contents: [  // 요청 본문에 포함할 데이터 정의
        {
          parts: [
            {
              text: "오늘 운동을 갈까요 말까요? 타당한 이유. 핵심만.",  // 질문 텍스트
            },
          ],
        },
      ],
    });

    const json = response.data;  // 응답 받은 데이터를 JSON 형태로 파싱

    const answer = json.candidates[0].content.parts[0].text;  // JSON에서 필요한 답변을 추출

    return answer;  // 추출한 답변을 클라이언트에 반환

  } catch (error) {  // API 호출 중 에러가 발생했을 경우
    console.error("Error during API call:", error);  // 에러를 로그로 출력
    return reply.status(500).send({ error: "API 호출 중 오류가 발생했습니다." });  // 500 에러와 함께 메시지를 반환
  }
});

fastify.listen(
  { port: process.env.PORT || 3000, host: "0.0.0.0" },  // 서버가 요청을 기다릴 포트와 호스트 지정
  function (err, address) {
    if (err) {  // 서버가 시작할 때 오류가 발생하면
      console.error(err);  // 오류를 로그로 출력
      process.exit(1);  // 서버를 종료
    }
    console.log(`Your app is listening on ${address}`);  // 서버가 정상적으로 시작되면 주소를 출력
  }
);

.env api key 입력

이 코드에서는 CORS를 처리하지 않기 때문에, 다른 도메인에서의 요청을 받을 때 CORS 에러가 발생할 수 있다. 브라우저는 보안상 다른 도메인에서 오는 요청을 기본적으로 제한하며, 이를 해결하려면 서버에서 명시적으로 CORS 정책을 설정해야 함.

🚨 문제 상황

• 클라이언트에서 API 요청을 보내는데, CORS 에러가 발생하였다.

🎯 시도한 과정

• Fastify 서버를 생성하고 외부 API를 호출하는 코드 작성 중, 다른 도메인에서의 요청에 대한 보안 정책으로 CORS 문제가 발생함.

🛠️ 해결 방법

• @fastify/cors 플러그인을 사용하여 서버에서 CORS 정책을 명시적으로 설정함으로써 모든 도메인에서의 요청을 허용하도록 변경하였다. 이를 통해 CORS 에러를 해결.

const path = require("path");
const axios = require('axios');

const fastify = require("fastify")({
  logger: true, // 로깅을 활성화
});

// npm install @fastify/cors@8
// fastify-cors 플러그인 추가
fastify.register(require('@fastify/cors'), {
  origin: "*", // 모든 도메인에서 요청을 허용
});

fastify.get("/", async function (request, reply) {
  // 환경 변수가 제대로 로드되었는지 확인
  const { GEMINI_KEY } = process.env;
  
  if (!GEMINI_KEY) {
    return reply.status(500).send({ error: "GEMINI_KEY 환경 변수가 설정되지 않았습니다." });
  }

  console.log("GEMINI_KEY:", GEMINI_KEY);

  const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${GEMINI_KEY}`;
  
  try {
    const response = await axios.post(url, {
      contents: [
        {
          parts: [
            {
              text: "어떡하면 학생들이 저한테 집중해줄까요? 20자 이내로. 핵심만.",
            },
          ],
        },
      ],
    });

    // JSON 형태로 응답이 오기 때문에, 별도로 JSON.parse를 할 필요 없이 바로 사용 가능
    const json = response.data;

    // 응답의 구조에 맞게 필요한 값을 추출
    const answer = json.candidates[0].content.parts[0].text;
    
    return answer;  // 결과를 클라이언트에게 반환

  } catch (error) {
    console.error("Error during API call:", error);
    return reply.status(500).send({ error: "API 호출 중 오류가 발생했습니다." });
  }
});

fastify.listen(
  { port: process.env.PORT || 3000, host: "0.0.0.0" },
  function (err, address) {
    if (err) {
      console.error(err);
      process.exit(1);
    }
    console.log(`Your app is listening on ${address}`);
  }
);

🐳 느낀 점

• CORS는 기본적으로 다른 도메인에서 오는 요청을 차단하는 보안 정책으로, 이를 해결하려면 서버에서 CORS 헤더를 설정해야 한다는 점을 이해하였다. origin: "*" 설정으로 모든 도메인에서 요청을 허용하게 됨.
• 결론적으로, VScode에서 로컬 서버가 다른 도메인에 요청을 보낼 때 CORS 문제가 발생할 수 있으며, 이를 해결하기 위해서는 서버 측에서 CORS를 허용해주어야 한다. 글리치 서버에서는 CORS 문제가 발생하지 않지만, 요청을 받는 서버가 CORS 설정을 해야만 정상적으로 데이터를 받을 수 있다.

👩‍💻 참고 자료