如何在 getServerSideProps 中使用 fetch 转发 cookie？答案

【问题标题】：How do I forward a cookie using fetch in getServerSideProps?如何在 getServerSideProps 中使用 fetch 转发 cookie？
【发布时间】：2020-09-13 19:51:04
【问题描述】：

我正在为我的应用程序使用 Nextjs。在页面上，我想从经过身份验证的 API 端点（'/api/profile'）获取数据。

我尝试了以下方法，但没有成功：

export async function getServerSideProps(ctx) {
  const { req, res } = ctx
  const cookies = cookie.parse(req.headers.cookie ?? '')
  const mycookie = cookies[MY_COOKIE] // mycookie exists and is set correctly

  if (mycookie) {
    const response = await fetch(process.env.SERVER_HOST+'/api/profile', {
      credentials: 'same-origin' // I tried with and without this, also tried "include" instead
    })

  ...

我有两个问题：

有没有办法避免输入绝对 URL？（我希望简单地使用“/api/profile”，因为它是一个“内部”api）
如何确保从 /api/profile 获取数据所需的 cookie 是通过 fetch 转发的？

注意：我的 cookie 是 httpOnly。

【问题讨论】：

标签： reactjs cookies next.js

【解决方案1】：

原来我可以通过以下方式手动转发 cookie：

if (mycookie) {
  const response = await fetch(process.env.SERVER_HOST+'/api/profile', {     
    headers: {
      cookie: mycookie
    }
  })
...

【讨论】：

【解决方案2】：

如果您使用获取服务器端道具，那么推荐的方法是直接在 getserversideprops 中处理您拥有的任何数据获取功能。

调用 fetch /api 是多余的。你可以做的是从api中提取函数并直接在getserversideprops中使用。

你现在正在做的是客户端 -> 服务端渲染 -> api -> 服务端渲染 -> 客户端

它可以变成客户端->服务端渲染-客户端

【讨论】：

但是如果我们在 serverSideGetProps 中包含所有的 API 逻辑，那我们为什么需要一个单独的后端服务器。这不会高度耦合我们的前端和后端逻辑吗？
这真的取决于你的后端和你的应用程序真正做什么。如果您的应用程序仅包含服务器端生成的页面，那么是的后端是多余的。但我对此表示怀疑，我相信你也会有 api 端点。
是的，我还有一些其他的 API 被水合反应组件中的 ajax 请求使用。