使用Nuxt 3 SSR时为何在DevTools网络面板仍能看到请求？

我使用Nuxt 3.11.1，尝试从服务端发送请求时，所有请求仍会出现在浏览器DevTools的网络面板中，这让我怀疑请求是否真的走了服务端。

我编写了一个用于发送请求的组合式函数useData，初始版本使用$fetch实现：

export async function useData(endpoint, params, method = "POST") {
  const authToken = useCookie("Authorization-Token");

  const options = {
    method,
    headers: {
      "Client-Token": import.meta.env.VITE_API_CLIENT_TOKEN,
      "Authorization-Token": authToken.value,
    },
  };

  if (method === "POST") {
    options.body = { ...params };
  }

  try {
    const response = await $fetch(
      `${import.meta.env.VITE_API_BASE_URL}/v1/${endpoint}`,
      options
    );

    return response;
  } catch (error) {
    throw error;
  }
}

在页面组件中我这样使用该组合式函数：

const authToken = useCookie("Authorization-Token");

if (authToken.value) {
  await useAsyncData(async () => {
    fetchData();
  });
}

async function fetchData() {
  try {
    const response = await useData("URL");
  }
}

当authToken不存在时，我会生成新令牌并从客户端发送请求，同时将令牌存入cookie供后续使用。功能一切正常，但所有请求都显示在网络面板中，且无法在Nuxt DevTools的payload面板看到数据。

更新： #

我将useData组合式函数改为使用useFetch替代$fetch后，除第一个请求外，其余请求都能在Nuxt DevTools的payload面板中看到请求信息，但仍会出现在浏览器网络面板里。更新后的useData代码如下：

export async function useData(endpoint, params, method = "POST") {
  return new Promise(async (resolve, reject) => {
    const authToken = useCookie("Authorization-Token");

    const options = {
      method,
      headers: {
        "Client-Token": import.meta.env.VITE_API_CLIENT_TOKEN,
        "Authorization-Token": authToken.value,
      },
    };

    if (method === "POST") {
      options.body = { ...params };
    }

    const {
      data: { value: response },
      error,
    } = await useFetch(
      `${import.meta.env.VITE_API_BASE_URL}/v1/${endpoint}`,
      options
    );

    if (error.value) {
      reject({
        response: {
          _data: {
            code: error.value?.cause.response.status,
          },
        },
      });
    }

    resolve(response);
  });
}

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