Django-REST Framework API前端获取登录用户认证失败排查

核心问题 #

你的Home组件是服务器组件（Next.js中默认async组件为服务器组件），服务器组件内的fetch请求是在Next.js服务器端发起的，不会携带浏览器客户端的Session Cookie。而Postman直接请求、浏览器访问API都是在客户端发起，能携带登录后生成的sessionid，所以可以正常获取用户信息。

解决方案：将用户认证相关请求改为客户端执行 #

把首页的用户获取逻辑改成客户端组件，这样fetch会在浏览器端发起，自动携带Session Cookie。

修改后的首页代码：

'use client'
import { useState, useEffect } from 'react'

async function getUser() {
  const response = await fetch('http://127.0.0.1:8000/user/user', {
      method: 'GET',
      credentials: 'include'
  })

  if(!response.ok) {
      throw new Error('Failed to fetch data')
  } else {
      return response.json()
  }
}

export default function Home() {
  const [user, setUser] = useState(null)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const userData = await getUser()
        setUser(userData)
      } catch (err) {
        setError(err.message)
      }
    }
    fetchUser()
  }, [])

  if (error) return <main><p>{error}</p></main>
  if (!user) return <main><p>Loading...</p></main>

  return (
      <main>
          <p>{user.username}</p>
      </main>
  )
}

额外检查项 #

1. 完善Django CORS配置
   确保settings.py中允许携带凭证并配置正确的跨域源：

   CORS_ALLOW_CREDENTIALS = True
   CORS_ALLOWED_ORIGINS = [
       "http://localhost:3000",  # 你的Next.js运行端口
       "http://127.0.0.1:3000",
   ]
   

2. 修复登录后的路由跳转
   登录成功后取消router.push('/')的注释，确保跳转到首页：

   if (response.ok) {
       router.push('/')
       console.log('ok')
   }
   

为什么之前的获奖者接口能正常工作？ #

get_last_four_winners是公开接口，不需要认证，所以服务器端发起的请求也能正常获取数据；而/user/user需要认证，服务器端请求没有携带客户端的Session Cookie，因此返回"未认证"错误。

内容的提问来源于stack exchange，提问作者Mati Pendino