/

如何在 Next.js 應用程式中在伺服器端獲取 Cookie

如何在 Next.js 應用程式中在伺服器端獲取 Cookie

在 Next.js 中，在伺服器端渲染時存取 Cookie 可能比你想像中困難。以下是我解決這個問題的方法。

我遇到了這個問題。我的應用程式依賴於Cookie進行身份驗證，在使用 Next.js 時，顯然我的 Cookie 在首頁初始化時未被設置。

以下是負責使用Axios對一個 GET 端點進行請求的程式碼：

1
2
3
4
5
6
7
Bookings.getInitialProps = async ctx => {
 const response = await axios.get('http://localhost:3000/api/bookings/list')

 return {
 bookings: response.data
 }
}

我在伺服器端的端點上有 Passport.js，但它無法在 SSR 頁面上對用戶進行身份驗證，因為它找不到任何 Cookie。

我必須將程式碼更改為以下形式，將 Cookie 添加到 headers 中：

1
2
3
4
5
6
7
8
9
10
11
Bookings.getInitialProps = async ctx => {
 const response = await axios({
 method: 'get',
 url: 'http://localhost:3000/api/bookings/list',
 headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined
 })

 return {
 bookings: response.data
 }
}

讓 Cookie 在後端中可用的關鍵是添加：

1
headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined

到 Axios 的設定中。

tags: [“Next.js”, “cookies”, “server-side rendering”, “Axios”]