Next.js用nookies遇跨站Cookie设置失败：需标记Secure属性

• 检查nookies参数完整性
  确保设置Cookie时domain和path参数正确：

  • domain要匹配当前域名，子域名场景需加前缀点（如.example.com）
  • path设为'/'，避免Cookie仅在特定路径生效
    代码示例：

  import { setCookie } from 'nookies'
  
  setCookie(null, 'token', 'your_token', {
    maxAge: 30 * 24 * 60 * 60,
    path: '/',
    domain: '.yourdomain.com',
    secure: true,
    sameSite: 'None',
    httpOnly: false // 前端需读取则设为false，否则建议开启httpOnly
  })
  

• 验证Axios的withCredentials配置
  不管客户端还是服务端请求，必须开启withCredentials: true：

  • 客户端Axios配置：

    import axios from 'axios'
    
    const api = axios.create({
      baseURL: process.env.NEXT_PUBLIC_API_URL,
      withCredentials: true
    })
    

  • 服务端fetch请求（如getServerSideProps中）要加credentials: 'include'：

    const res = await fetch(`${process.env.API_URL}/login`, {
      method: 'POST',
      credentials: 'include',
      body: JSON.stringify(loginData)
    })
    

• 排查浏览器隐私拦截
  打开Chromium的开发者工具，到Application -> Cookies查看是否有Cookie被标记为Blocked，同时检查浏览器隐私设置是否开启了"阻止第三方Cookie"——如果API和前端跨域，很可能被归类为第三方。

• 服务端响应头配置（后端返回Cookie的场景）
  后端必须设置两个关键响应头：

  • Access-Control-Allow-Origin：不能是*，必须是前端具体域名
  • Access-Control-Allow-Credentials: true
    同时Set-Cookie的参数要和前端设置保持一致，确保Secure、SameSite等属性正确。

• Next.js SSR场景注意事项
  在getServerSideProps或getInitialProps中设置Cookie时，要把context对象作为第一个参数传给setCookie，不能传null：

  export async function getServerSideProps(context) {
    setCookie(context, 'token', 'ssr_token', {
      maxAge: 30 * 24 * 60 * 60,
      path: '/',
      secure: true,
      sameSite: 'None'
    })
    return { props: {} }
  }
  

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