Nextjs13 在服务器端渲染 如何使用 axios withCredentials:true

Nextjs13 on server side rendering How to use axios withCredentials:true

提问人:boyenec 提问时间:11/17/2023 最后编辑:Yilmazboyenec 更新时间:11/18/2023 访问量:37

问:

我想知道如何在服务器端使用 Axois 和 supports true 在 Nextjs13 上。我在服务器端尝试过这个,但不能在服务器端工作,但在客户端工作相同的代码withCredentials:true

 axios.get(`http://localhost:8000/single-blog/${params.slug}`,{withCredentials:true})
javascript reactjs axios next.js13

评论


答:

1赞 Yilmaz 11/18/2023 #1

我认为这是因为它是特定于客户端的功能。此选项通常用于 Web 浏览器,在其中处理跨域请求,并且需要包含凭据(如 Cookie、授权标头或 TLS 客户端证书)。

设置为 true 时,在请求中包含任何凭据,例如 Cookie 或 HTTP 身份验证标头。当您跨不同源(不同的域、端口或协议创建不同的源)发出请求并需要发送或接收 Cookie 或身份验证信息时,这一点非常重要。withCredentialsaxios

通常,当向同一来源发出请求时,cookie 会随请求一起自动发送。浏览器通过包含与请求的域相关的 cookie 来处理此行为。但是,在处理跨域请求时,浏览器会遵循 ,这限制了 Cookie 或身份验证信息的自动发送。Same-Origin Policy

在服务器到服务器通信中,通常通过标头处理身份验证、凭据或令牌。例如:

 axios.get("yourUrl", {
    headers: {
        Cookie: request.headers.cookie
    }
});

Next.js 有标头

headers 函数允许您读取 HTTP 传入请求 来自服务器组件的标头。

此 API 扩展了 Web 标头 API。它是只读的,这意味着您 无法设置/删除传出请求标头。

从同一链接中,您可以看到如何提取标头:

从 'next/headers' 导入 { headers }

export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')
 
  return <div>Referer: {referer}</div>
}

评论

0赞 boyenec 11/18/2023
req.headers.cookie你能在这里给我完整的代码吗,我收到错误req is undefined nextjs13
0赞 Yilmaz 11/18/2023
req 仅指请求。在中间件或 API 函数中,您可能正在使用 request