NextJS : Server Actions 에러

Next.js Server Actions 관련 정리

문제 상황

• Next.js 애플리케이션을 Nginx로 배포 후 "Invalid Server Actions request" 오류 발생
• 화면은 정상적으로 로드되지만 서버 요청(로그인 등)에서 500 오류 발생
• 예: POST https:/주소명 500 (Internal Server Error)

원인

• Next.js 14부터 Server Actions에 대한 보안이 강화됨
• 기본적으로 동일 출처(same-origin) 요청만 허용하며, 다른 도메인은 명시적 허용 필요
• Nginx와 같은 리버스 프록시 사용 시 헤더가 제대로 전달되지 않는 문제
• CSRF(Cross-Site Request Forgery) 공격 방지를 위한 보안 조치

해결 방법

• next.config.js 파일에 allowedOrigins 설정 추가:

experimental: {
  serverActions: {
    allowedOrigins: ['도메인명']
  }
}

설정 관련 중요 사항

• allowedOrigins에는 프론트엔드 도메인만 추가 (백엔드 도메인은 필요 없음)
• 전체 URL이 아닌 기본 도메인만 추가 (경로나 파라미터 제외)
• 프로토콜(https://)은 생략 가능

환경별 차이

• Vercel: 자동으로 처리되어 이 문제가 거의 발생하지 않음 (Next.js 제작사)
• 직접 리눅스 배포: 프록시 설정과 헤더 전달을 수동으로 구성해야 함
• 쿠버네티스: 인그레스 컨트롤러가 일부 헤더를 자동으로 처리하는 경우 있음

특이사항

• 모든 Next.js 프로젝트에서 발생하는 문제는 아님
• 버전, 배포 환경, 구성, 도메인 설정에 따라 발생 여부가 달라질 수 있음
• 같은 도메인에서 호스팅되는 경우 문제가 발생하지 않을 수 있음