Next.js Cross origin request 경고, allowedDevOrigins 설정법

휴대폰, 로컬 프록시, 사용자 지정 개발 도메인으로 next dev를 열었더니 터미널에 Cross origin request detected가 찍힐 수 있습니다. 페이지가 당장 열려도 경고에 나온 요청 origin을 먼저 읽고, 그 호스트를 신뢰할 때만 allowedDevOrigins에 추가하세요. API 응답에 CORS 헤더부터 붙이는 문제와는 경계가 다릅니다.

Tap to zoom

완료 상태는 단순히 화면이 뜨는 것이 아닙니다. 설정을 저장하고 개발 서버를 다시 시작한 뒤, 같은 주소로 접속했을 때 해당 Cross origin 경고가 더는 추가되지 않는 상태까지 확인해야 합니다.

경고에 나온 origin을 allowedDevOrigins에 넣습니다

Next.js 공식 allowedDevOrigins 문서는 개발 서버를 시작한 호스트 외의 origin이 개발 서버를 요청해야 할 때 이 옵션을 사용하라고 안내합니다. 현재 문서는 개발 중 dev 전용 자산과 엔드포인트에 대한 교차 origin 요청을 기본 차단한다고 설명합니다. 경고만 표시되는 버전을 쓰더라도 무조건 숨기기보다 지금 요청 경로를 확인하는 편이 안전합니다.

먼저 터미널 경고에서 from ... 뒤에 표시된 origin을 찾습니다. 예를 들어 브라우저 주소가 https://local-origin.dev이고 이 도메인을 직접 관리한다면, 설정에는 프로토콜이나 경로가 아니라 공식 예시처럼 신뢰하는 호스트 이름을 넣습니다.

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  allowedDevOrigins: ['local-origin.dev'],
}

export default nextConfig

next.config.js를 쓰는 프로젝트라면 내보내기 형식만 CommonJS에 맞춥니다. Next.js는 .js, .mjs, .ts 설정 파일을 지원하므로, AI에게 새 설정 파일을 만들게 하기 전에 프로젝트 루트에 이미 있는 next.config.* 하나를 먼저 찾으세요.

// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
  allowedDevOrigins: ['local-origin.dev'],
}

CORS·Server Action 설정과 지키는 경계가 다릅니다

Tap to zoom

세 설정에는 origin이 들어가지만 적용 지점이 다릅니다. **이번 터미널 경고의 첫 선택은 allowedDevOrigins**입니다.

Route Handler CORS 공식 예시는 Access-Control-Allow-Origin 같은 응답 헤더를 설정합니다. 반면 serverActions.allowedOrigins 문서는 Server Action 호출을 위한 별도 허용 목록을 설명합니다. 이름이 비슷하다는 이유로 셋을 한꺼번에 바꾸면 원인을 잃습니다.

브라우저 fetch 자체가 CORS로 막힌 상황이라면 no-cors를 넣기 전에 브라우저와 서버를 가르는 점검이 맞는 출발점입니다. 지금처럼 next dev 터미널이 origin을 지목하면 이 글의 개발 서버 경로를 따릅니다.

경고의 호스트만 허용하고 개발 서버를 다시 켭니다

다음 순서로 한 번에 한 변수만 바꿉니다.

1. 터미널 경고에서 요청 origin의 호스트를 복사합니다.
2. 그 호스트가 본인이나 팀이 관리하는 개발 도메인인지 확인합니다.
3. 기존 next.config.*의 최상위 객체에 allowedDevOrigins 배열을 추가합니다.
4. 실행 중인 next dev를 종료하고 같은 명령으로 다시 시작합니다.
5. 이전과 같은 휴대폰·프록시·개발 도메인 주소로 다시 접속합니다.

*.local-origin.dev처럼 하위 도메인 패턴도 공식 예시에 있지만, 필요 범위가 한 호스트라면 한 호스트만 적는 편이 확인하기 쉽습니다. 소유하지 않은 외부 도메인이나 넓은 패턴을 편의상 허용하지 마세요. AI에게 수정을 맡길 때도 범위를 고정합니다.

[AI 수정 프롬프트]
프로젝트 루트의 기존 next.config 파일만 수정해 줘.
최상위 설정에 allowedDevOrigins: ['local-origin.dev']를 추가하고,
다른 CORS 헤더와 Server Action 설정은 바꾸지 마.
수정한 파일 경로와 diff만 보여 줘.

설정 저장 뒤 서버가 다시 안 켜지면 origin 문제가 아니라 포트 점유일 수 있습니다. 이때는 EADDRINUSE에서 3000번 포트 주인을 확인하는 순서로 갈라서 점검합니다.

같은 요청으로 경고가 사라졌는지 확인합니다

Tap to zoom

검증은 새 터미널 세션에서 진행합니다. 기존 로그가 남아 있으면 수정 전 경고와 수정 후 상태가 섞입니다.

• next dev가 오류 없이 시작됐는가
• 브라우저가 실제로 설정한 호스트에서 접속했는가
• 같은 페이지와 내부 자산 요청을 반복했는가
• 반복 뒤 새 Cross origin request detected 줄이 생기지 않았는가

경고가 계속되면 값을 넓히지 말고 새 경고에 찍힌 origin과 설정 문자열을 한 글자씩 비교하세요. 프록시가 다른 호스트 이름으로 요청을 전달하거나, 다른 next.config.*를 수정했거나, 재시작하지 않은 경우를 먼저 제외합니다. 그 뒤에도 남는다면 사용 중인 Next.js 버전의 공식 문서와 재현 절차를 함께 정리해 관리자나 프레임워크 이슈 트래커에 넘깁니다.

오늘의 종료 조건은 신뢰하는 개발 호스트 하나만 설정에 남고, 재시작한 터미널에서 같은 요청의 경고가 다시 생기지 않는 것입니다.

참고 출처

• Next.js allowedDevOrigins
• Next.js headers: CORS
• Next.js serverActions: allowedOrigins
• Next.js next.config.js reference

이 글은 AI 코딩과 개발 학습의 일반 정보 제공 목적입니다. 도구, 모델, 커리큘럼, 요금은 버전과 시점에 따라 달라질 수 있으므로 실습이나 도입 전 공식 문서와 최신 릴리스 노트를 확인하세요.