[TIL] 시큐어 코딩, glitch, CORS

2025-02-05 TIL

📝 TIL (Today I Learned)
🔗 원본 이슈: #11
📅 작성일: 2025-02-05
🔄 최종 수정: 2025년 03월 05일


🍀 새롭게 배운 것

  • 기초적 시큐어 코딩 (클로저 사용)
  • glitch를 이용한 키 노출 문제 해결
    • CORS 문제 해결

🍎 오늘의 문제 상황

  • Glitch에서 Fastify를 사용해 서버를 개발하던 중, 클라이언트에서 API 요청을 보낼 때 CORS 오류가 발생함
    • Access to fetch at 'https://my-glitch-app.glitch.me/api' from origin 'https://another-site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    • 서버에서 CORS 설정을 올바르게 해주어야 해결할 수 있다.

해결 과정

  • Fastify에 CORS 플러그인 추가
    • @fastify/cors 플러그인을 등록하여 모든 도메인에서의 요청을 허용하도록 설정
    • fastify.register(require('@fastify/cors'), { origin: "*", // 모든 도메인에서 요청을 허용 });
  • CORS 플러그인 설치
    • 무조건 8버전을 설치해야 제대로 실행이 되었다.
    • npm install @fastify/cors@8.0.0

🦄 느낀 점

  • CORS가 어떤 것인지 몰랐는데, 이번에 해결하면서 알게 되었다.
  • Fastify는 기본적으로 CORS를 막고 있어서 직접 열어줘야 한다는 것을 배웠다.
  • 키 노출을 해결하는 방법으로 환경변수를 활용하는 더 좋은 방법을 배운 것 같다.

🐬 깃블로그 정리

  • [Gemini를 이용한 메모 태그 추천 서비스] (https://nan0silver.github.io/memoGemini/)