如何使用 ssr nuxt 和 httpOnly auth 发送 fetch 请求答案

【问题标题】：how to send fetch request with ssr nuxt and httpOnly auth如何使用 ssr nuxt 和 httpOnly auth 发送 fetch 请求
【发布时间】：2021-01-19 09:28:03
【问题描述】：

我有一个 SSR nuxt 应用程序和 laravel 后端。在 auth 中，我们使用 HttpOnly 并且在大多数代码中我们都可以，但是在服务器端使用 fetch 和 asyncData 发送请求时存在问题。

我知道只有浏览器会自动将身份验证标头与请求合并并发送。现在我正在使用 fetch，这将向服务器发送请求，并且服务器上没有浏览器。

我搜索了在 nuxt 中进行自定义提取，但没有找到。我应该如何发送带有 fetch 和 asyncdata 的请求并且没有收到401 error？

更新

***：不幸的是，我必须将nuxt 模式从ssr 更改为spa，因为我还没有找到任何答案。

【问题讨论】：

标签： fetch nuxt.js server-side-rendering httponly asyncdata

【解决方案1】：

fetch 不会发送 cookie，除非您设置了 credentials init option。尝试将credentials 选项设置为same-site 或include，如下所示：

fetch('your-endpoint', { credentials: 'same-site' }).then(...)

【讨论】：

您能详细介绍一下吗？我搜索了这个，但我不明白我应该做什么。我必须在nuxt中编写代码吗？如果是，在哪里？
@Esamani77 尝试在您的nuxt.config.js axios.nuxtjs.org/options#credentials 中设置axios: { credentials: true }

【解决方案2】：

我还没有找到答案。我在nuxt.config.js 中更改了axios 部分，如下所示：

axios: {
    baseURL: 'https://api.iranicard.net/api/v1/admin/',
    credentials: 'same-origin',
    common: {
      'Accept': 'application/json',
      "Content-Type": "application/json"
    },
    retry: { retries: 2 },
    proxyHeaders: false
  },

但在成功登录后，当我在使用fetch 或asyncData 钩子的组件中时，我退出了并且它不起作用。

【讨论】：