문제

문제 정의

Next.js 미들웨어에서 API 서버로 fetch 요청을 보낼 때, credentials: 'include' 설정을 사용하더라도 브라우저가 보낸 쿠키가 요청 헤더에 자동으로 포함되지 않는다. 이로 인해 인증 관련 문제가 발생하며, 수동으로 쿠키를 읽어 API 요청의 헤더에 추가해야 한다.

---

원인 분석

1. Edge Runtime의 동작 방식

   Next.js 미들웨어(middleware.ts)는 브라우저(client)가 아닌 Edge Runtime 환경에서 실행된다.

   이 환경에서는 브라우저처럼 쿠키를 자동으로 포함하지 않으며, 클라이언트 요청의 헤더를 수동으로 처리해야 한다.

2. credentials: 'include'의 한계

   브라우저에서 fetch 요청에 credentials: 'include'를 설정하면 브라우저의 쿠키가 자동으로 요청에 포함된다.

   그러나 Edge Runtime은 브라우저가 아니기 때문에 이 설정만으로는 쿠키가 포함되지 않는다.

3. 독립적인 요청 처리

   미들웨어에서 발생하는 fetch 요청은 클라이언트 요청과 별개의 새로운 요청으로 간주된다.

   따라서, 브라우저 요청의 쿠키를 API 서버로 전달하려면 수동으로 헤더에 추가해야 한다.

---

해결 방법

클라이언트 요청의 쿠키를 수동으로 가져오기

브라우저 요청에서 cookie 헤더를 읽고, 이를 fetch 요청의 헤더에 추가한다.

const cookieHeader = request.headers.get('cookie') || ''; // 쿠키가 없으면 빈 문자열 반환

const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/refresh`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    cookie: cookieHeader, // 수동으로 클라이언트 쿠키 추가
  },
});

---

미들웨어의 동작 흐름

• 클라이언트 요청 → 미들웨어: 브라우저 요청에서 쿠키가 request.headers.get('cookie')로 전달된다.
  
• 미들웨어 → API 서버: 미들웨어는 fetch 요청의 cookie 헤더에 클라이언트 요청의 쿠키를 명시적으로 추가한다.
  

---

결론

Next.js 미들웨어(middleware.ts)에서 fetch 요청 시 credentials: 'include' 설정은 브라우저에서처럼 동작하지 않는다.

브라우저 요청의 쿠키를 request.headers.get('cookie')로 읽어 fetch 요청의 헤더에 추가하는 것이 필수적이다.

이 문제는 Edge Runtime의 설계 때문이며, 미들웨어에서의 요청은 클라이언트 요청과 독립적으로 처리된다는 점을 이해해야 한다.

쿠키를 수동으로 추가하는 방식으로 문제를 해결할 수 있다.

---

참고문헌

• How to send cookies with Fetch API in Next.js 13.4 middleware for authorization?
• Next.js does not send cookies with fetch request even though credentials are included
• API Reference: Edge Runtime
• Edge Runtime