Nuxt Fetch 总是使用 cookies 返回 401

Question

我有一个让我困惑的问题，我创建了一个在 http://localhost:3000 上运行的网络和一个在 http://localhost:5050 上运行的后端，其中使用 useFetch 和 $fetch 获取数据，当我在完成后检查我的身份验证已获取 cookie，但是当我访问需要身份验证的页面时，它返回 401，我也尝试使用相同的 cookie 与 Postman 一切正常，所以我认为问题可能不是来自后端，我也添加了网址到后端的 ALLOWED_ORIGINS

这里是代码

组件/ListSN.vue

const { allSN: datasn } = await useSN()
console.log(datasn)

可组合/序列号.ts

export const useSN = async () => {
  const { data, error } = await useFetch("/api/sn", {
    credentials: "include",
  });

  if (error.value) {
    throw createError({
      ...error.value,
      statusMessage: `Couldn't fetch data.` + error.value,
    });
  }

  const { allSN } = data.value;

  return { allSN };
};

服务器/api/sn/index.ts

import type { SerialNumbers } from "~/types/serialnumber";

export const allSN: SerialNumbers = [];

const apiBaseUrl = "http://localhost:5050";

export default defineEventHandler(async () => {
  if (allSN.length) {
    return {
      allSN,
    };
  }

  const _allSN: [] = await $fetch(`${apiBaseUrl}/serialnumber`, {
    credentials: "include",
  });
  allSN.push(..._allSN);

  if (!allSN) {
    throw createError({
      statusCode: 404,
      message: "Data not fetched.",
    });
  }

  return {
    allSN,
  };
});

我真的很感谢所提供的所有帮助

Answer 1

我错过了必须用于发送 cookie 的标头 这是更新的代码

export default defineEventHandler(async (event) => {
  const { req } = event;
  const cookies = req.headers.cookie;

  const _allSN: [] = await $fetch(`${apiBaseUrl}/serialnumber`, {
    credentials: "include",
    headers: cookies ? { cookie: cookies } : undefined,
  });

});