choijming21 님의 블로그

[ Troubleshooting🛠️ ] CORS 문제 해결

Next.js 프로젝트에서 melon API를 연결할 때 발생할 수 있는 CORS 이슈와 해결 방법을 단계별로 설명해보려고 합니다. 그러면 먼저 CORS가 무엇인지 부터 알아야 할텐데요! 🌍 CORS란? CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유를 의미하며, 서로 다른 출처의 웹 페이지나 서버가 자원에 접근할 수 있도록 허용하는 보안 메커니즘입니다.    1.  문제 발생❓ 웹 브라우저에서 Next.js 클라이언트 코드가 로컬 API 서버(http://localhost:5000)에 직접 요청하면 아래와 같은 CORS 오류가 발생할 수 있습니다.Access to XMLHttpRequest at 'http://localhost:5000/api/v1/chart/..

웹 개발을 하다보면 인증 방식에 대해 고민하게 됩니다. 이때 가장 기본이 되는 개념이 '쿠키'와 '토큰'입니다.  🍪 쿠키(Cookie)란? 쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 파일입니다. 사용자의 세션 관리, 개인화 설정 등을 위해 사용됩니다. 웹 서버가 사용자의 브라우저에 전송하면, 브라우저가 이를 저장했다가 동일한 서버에 요청을 보낼 때 함께 잔송합니다. 🍪 쿠키의 특징:클라이언트(브라우저) 측에 정보 저장됨크기 제한이 있음(보통 4KB)만료 날짜를 정할 수 있음특정 도메인에 종속됨 🍪 쿠키의 예시:// 서버에서 쿠키 설정 (Node.js 예시)response.setHeader('Set-Cookie', 'username=김철수; expires=Fri, 31 Dec 202..