Next.js App Router에서 API 프록시 레이어를 구축하여 CORS, 보안 문제를 해결

Next.js App Router 기반 프로젝트에서 CORS 문제 및 환경 변수 관리의 어려움으로 API 프록시 레이어 구축

Next.js API Routes를 활용하여 CORS 해결, 백엔드 URL 보안, 인증 토큰 안전 관리를 구현

httpOnly 쿠키를 사용하여 XSS 공격 방지 및 토큰 관리 효율성을 높임

프록시 레이어 도입으로 클라이언트 코드 단순화 및 OAuth 콜백 흐름 개선

API 프록시 레이어의 핵심 아키텍처

본문에서는 Next.js App Router의 API Routes를 활용하여 API 프록시 레이어를 구축한 과정을 설명한다. 핵심은 catch-all 라우트([...path]/route.ts)를 통해 모든 API 요청을 중앙에서 처리하고, 각 요청에 필요한 로직을 추가하는 것이다.

CORS 문제 해결: 프록시 서버에서 Access-Control-Allow-Origin 설정을 일괄 관리하여 프론트엔드와 백엔드 간의 CORS 설정 간소화

보안 강화: 백엔드 URL을 노출하지 않고, httpOnly 쿠키를 사용하여 XSS 공격(Cross-Site Scripting Attack) 방지

코드 단순화: 클라이언트 코드에서 백엔드 URL 및 토큰 관리를 제거하여 개발 생산성 향상

httpOnly 쿠키를 활용한 토큰 관리

글에서는 httpOnly 쿠키를 사용하여 인증 토큰(Authentication Token)을 안전하게 관리하는 방법을 제시한다. httpOnly 쿠키는 JavaScript에서 접근할 수 없으므로, XSS 공격으로부터 안전하다.

토큰 저장: Google OAuth 인증 후 발급된 JWT 토큰을 httpOnly 쿠키에 저장하여 보안성 확보

토큰 전달: 프록시 레이어에서 쿠키에 저장된 토큰을 꺼내 백엔드 API 호출 시 Authorization 헤더에 추가하여 인증 절차 간소화

OAuth 콜백 흐름: OAuth 인증 과정에서 토큰이 URL에 노출되는 문제를 해결하고, httpOnly 쿠키를 활용하여 보안성을 강화

Next.js API Routes의 활용

Next.js API Routes는 서버리스 함수를 쉽게 만들 수 있도록 지원하며, API 프록시 레이어 구축에 핵심적인 역할을 한다. 특히, catch-all 라우트를 사용하면 모든 API 요청을 하나의 파일에서 처리할 수 있어, 코드 관리의 효율성을 높일 수 있다.

API 라우팅: `/api/[...path]/route.ts` 구조를 통해 동적 라우팅을 구현하고, 모든 API 요청을 프록시 서버로 전달

요청 처리: `proxyRequest` 함수를 통해 요청 메서드, 헤더, 바디 등을 처리하고, 백엔드 API를 호출하여 응답을 반환

코드 재사용: 공통 로직을 `proxyRequest` 함수에 모아두어 코드 중복을 줄이고, 유지보수성을 향상