在 Next.js 中,在伺服器端渲染時存取 Cookie 可能比你想像中困難。以下是我解決這個問題的方法。
我遇到了這個問題。我的應用程式依賴於Cookie進行身份驗證,在使用 Next.js 時,顯然我的 Cookie 在首頁初始化時未被設置。
以下是負責使用Axios對一個 GET 端點進行請求的程式碼:
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
中:
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 在後端中可用的關鍵是添加:
headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined
到 Axios 的設定中。