글
Next.js CORS 에러 해결법: 로컬 환경부터 Vercel 배포까지
"어? 포스트맨(Postman)에서는 잘 되는데 왜 브라우저만 오면 에러가 나지?" 프론트엔드 개발자들의 영원한 숙적, 악명 높은 CORS 에러! Next.js와 React 로컬 환경부터 Vercel 배포까지 완벽하게 대처하는 프록시(Proxy) 및 헤더 설정법을 아주 쉽게 알려드립니다. 웹 개발을 처음 시작하고 오픈 API를 연결해서 멋진 화면을 만들려던 찰나, 브라우저 개발자 도구 콘솔창에 시뻘건 글씨로 has been blocked by CORS policy 라는 에러 메시지가 뜬 적 있으신가요? 진짜 이 메시지 볼 때마다 심장이 철렁하고 완전 짜증이 솟구치죠. 저도 신입 시절에 이 에러 하나 잡겠다고 밤을 꼴딱 새운 쓰라린 기억이 있답니다. 😭 백엔드 개발자 친구한테 "서버 안 되는데?"라고 물어봤다가 "포스트맨으로는 잘만 되는데 네 코드가 이상한 거 아냐?"라는 답변을 들으면 억울하기 짝이 없죠. 하지만 걱정 마세요! 이 에러는 여러분의 코드가 틀렸거나 서버가 고장 난 게 아니라, 브라우저의 아주 정상적이고 엄격한 보안 시스템이 작동 하고 있을 뿐이랍니다. 오늘 제가 로컬(Localhost) 환경부터 실제 Vercel 배포 환경까지 CORS 에러를 깔끔하게 우회하고 해결하는 마법 같은 방법을 알려드릴게요. 끝까지 읽어보시면 앞으로 CORS는 두렵지 않으실 거예요! 😊 1. 도대체 CORS가 뭐길래 날 괴롭힐까? 🤔 해결책을 알아보기 전에 적을 먼저 알아야겠죠? CORS(Cross-Origin Resource Sharing)는 우리말로 '교차 출처 리소스 공유'라는 뜻입니다. 이름이 너무 어렵죠? 쉽게 풀어서 설명해 드릴게요. 브라우저는 기본적으로 '동일 출처 정책(SOP)' 이...