كيفية الحصول على ملفات تعريف الارتباط من جانب الخادم في تطبيق Next.js

قد يكون الوصول إلى ملفات تعريف الارتباط أثناء العرض من جانب الخادم في Next.js أصعب مما تعتقد. إليكم كيف حللت ذلك.

كانت لدي هذه المشكلة. اعتمد تطبيقي علىبسكويتللمصادقة ، واستخدام Next.js على ما يبدو لم يتم تعيين ملفات تعريف الارتباط الخاصة بي عند تهيئة الصفحة الأولى.

كان لدي هذا الرمز ، والذي كان مسؤولاً عن الوصول إلى نقطة نهاية GET باستخدامأكسيوس:

Bookings.getInitialProps = async ctx => {
  const response = await axios.get('http://localhost:3000/api/bookings/list')

return { bookings: response.data } }

كان لدي Passport.js على نقطة نهاية جانب الخادم ، لكنه فشل في مصادقة المستخدم على صفحة SSR ، لأنه لم يعثر على أي ملف تعريف ارتباط.

اضطررت إلى تغيير الكود الخاص بي إلى هذا ، بإضافة ملفات تعريف الارتباط إلى ملف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 } }

كان مفتاح إتاحة ملفات تعريف الارتباط في الواجهة الخلفية هو إضافة:

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

لتكوين Axios.

تحميل مجانيكتيب Next.js


المزيد من البرامج التعليمية التالية: