개발자
Next.js middleware 질문입니다
2023년 09월 06일•조회 677
getServerSideProps에서 통신하는 axios의 헤더에 쿠키에 들어있는 엑세스 토큰을 삽입하려고 합니다. 다음과 같이 요청시 헤더에 엑세스 토큰을 넣는 middleware를 작성하고 실행을 시켰는데 동작하지 않습니다. 정확히 말하면 middleware에서 request.url.includes('api') 값을 찍어보면 false밖에 출력되지 않고, 엑세스 토큰이 요청 헤더에 전달되지 않는거 같습니다. next.config에서 프록시 설정도 해주었는데 뭐가 문제일까요? page router 방식이고 로컬 환경에서 실행중입니다.
1// middleware.ts
2export const middleware = async (request: NextRequest) => {
3 const response = NextResponse.next();
4 const requestHeaders = new Headers(request.headers);
5
6 requestHeaders.set("Content-Type", "application/json");
7 requestHeaders.set(
8 "Authorization",
9 `bearer ${request.cookies.get("accessToken")?.value}`
10 );
11
12 return NextResponse.next({
13 request: {
14 headers: requestHeaders,
15 },
16 });
17};
18
19// index.tsx
20export const getServerSideProps: GetServerSideProps = async (
21 context: GetServerSidePropsContext
22) => {
23 try {
24 const res = await axios.get("/api/v1/me/profile");
25 return {
26 props: res.data,
27 };
28 } catch (e) {
29 return { props: { result: "error" } };
30 }
31};
32
33//next.config.js
34async rewrites() {
35 return [
36 {
37 source: "/api/:v1*",
38 destination: "http://API주소/api/:v1*",
39 }이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이
더 많은 사람에게 노출될 수 있어요.
'보충이 필요해요' 버튼을 누르면 질문자에게
질문 내용 보충을 요청하는 알림이 가요.
익명님의 질문
답변 2
글쎄요.. 혹시 비어 토큰이 제대로 전달 되는지 확인해보시고 리턴 값이 제대로 출력하는지 로그 확인 부터 해보세요
안녕하세요. 우선 request.cookies.get("accessToken")?.value 이 문법이 먼저 맞는지 보셔야할 것 같아요. Next.js docs에 있는 cookies setting하는 방법 코드 첨부해드려요.
1import { NextResponse } from 'next/server'
2import type { NextRequest } from 'next/server'
3
4export function middleware(request: NextRequest) {
5 // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
6 // Getting cookies from the request using the `RequestCookies` API
7 let cookie = request.cookies.get('nextjs')
8 console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
9 const allCookies = request.cookies.getAll()
10 console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
11
12 request.cookies.has('nextjs') // => true
13 request.cookies.delete('nextjs')
14 request.cookies.has('nextjs') // => false
15
16 // Setting cookies on the response using the `ResponseCookies` API
17 const response = NextResponse.next()
18 response.cookies.set('vercel', 'fast')
19 response.cookies.set({
20 name: 'vercel',
21 value: 'fast',
22 path: '/',
23 })
24 cookie = response.cookies.get('vercel')
25 console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
26 // The outgoing response will have a `Set-Cookie:vercel=fast;path=/test` header.
27
28 return response
29}지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!