Nuxt 3 SSR模式下跨域Session Cookie认证问题求助

核心问题是SSR模式下，服务端执行API请求时不会自动携带浏览器发送给Nuxt服务端的Session Cookie，需要手动传递请求头中的Cookie到API请求。

解决方案步骤 #

1. 在Composable中传递Cookie请求头 #

修改useCheckAuth，通过useRequestHeader获取当前请求的Cookie，并在useFetch中手动设置Cookie请求头：

export const useCheckAuth = async () => {
  const config = useRuntimeConfig()
  // 获取服务端请求头中的Cookie（客户端时浏览器自动处理，此值为undefined）
  const cookie = useRequestHeader('cookie')

  const { status } = await useFetch('/auth/check', {
    baseURL: config.public.apiBase,
    method: 'get',
    credentials: 'include',
    // 仅在服务端时添加Cookie请求头
    headers: cookie ? { Cookie: cookie } : undefined
  })

  return status.value === 'success'
}

2. 确认API服务器CORS配置 #

确保你的PHP API服务器已正确配置CORS：

• 必须设置Access-Control-Allow-Credentials: true
• Access-Control-Allow-Origin不能设为*，需指定为Nuxt应用的具体域名（如https://your-nuxt-domain.com）
• 已正确设置Cookie的Secure和SameSite=None属性（需确保运行在HTTPS环境下，否则浏览器不会携带该Cookie）

3. 路由中间件无需额外修改 #

你的全局路由中间件逻辑无需调整，修改后的useCheckAuth会在服务端执行时自动携带正确的Cookie，已认证用户刷新页面不会再被跳转到登录页。

关键说明 #

• useRequestHeader('cookie')：在SSR服务端执行时，会获取浏览器发送给Nuxt服务端的Cookie；在客户端执行时，此值为undefined，此时浏览器会自动携带Cookie到API请求，无需手动设置。
• credentials: 'include'：确保跨域请求时允许携带凭证（Cookie），配合API服务器的CORS配置生效。

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