0) 핵심 요약 (결론 먼저)

• 가장 깔끔한 방법: 프록시 방식(Next rewrites) + LAN 접속

  → 모바일은 맥북의 :3000만 호출, Next가 내부에서 127.0.0.1:8080(백엔드)로 프록시 → CORS/localhost 문제 없음

• ngrok 쓸 때: 프록시 안 쓸 거라면 백엔드 CORS에 ngrok 도메인을 허용해야 함.

• 모바일이 localhost에 못 붙는 이유: 모바일에서 localhost/127.0.0.1은 “모바일 자기 자신”이기 때문.

• Swagger를 폰에서 직접 보려면: 백엔드를 0.0.0.0로 바인딩하고 http://<맥IP>:8080/swagger…로 접속.

A. 추천 플로우: 프록시(Next rewrites) + LAN 접속

브라우저는 항상 같은 오리진(/api, /oauth2)만 부르고, Next가 랩탑 내부에서 백엔드로 연결합니다.

1) Next를 LAN 바인딩으로 실행

# 일시 실행
npx next dev --hostname 0.0.0.0 -p 3000

# (권장) package.json
"scripts": {
  "dev:lan": "next dev --hostname 0.0.0.0 -p 3000"
}

2) next.config.mjs에 프록시(리라이트) 추가

// next.config.mjs
const API_ORIGIN = process.env.API_ORIGIN || '<http://127.0.0.1:8080>';

const nextConfig = {
  // ...기존 옵션 유지
  async rewrites() {
    return [
      { source: '/api/:path*',   destination: `${API_ORIGIN}/api/:path*` },
    ];
  },
};

export default nextConfig;

개발 서버 재시작 필요.

3) 클라이언트 호출부를 상대 경로로 통일

// axios 인스턴스
import axios from 'axios';
export const axiosApi = axios.create({
  baseURL: '/api',
  withCredentials: true, // 쿠키/세션이면
});
export const axiosLogin = axios.create({
  baseURL: '/oauth2',
  withCredentials: true,
});

절대 URL 금지: http://localhost:8080/...로 직접 때리면 모바일에서 다시 실패합니다.

4) 아이폰/안드로이드에서 접속

1. 맥 IP 확인: ipconfig getifaddr en0 → 예) 192.168.134.166
2. 모바일 브라우저에서 http://192.168.134.166:3000 접속
3. Network 탭(원격 디버깅)에서 **Request URL이 /api/...*로만 보이면 성공