Astro前端matter中fetch后无法访问Cookie问题求助

Astro 环境信息 #

Astro                    v4.4.15
Node                     v18.18.0
System                   Windows (x64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/tailwind
                         @qwikdev/astro
                         astro-compressor
                         @astrojs/react

问题描述 #

已启用Astro SSR模式，相关代码如下：

页面组件代码（index.astro） #

---
import Layout from "@layouts/Layout.astro";
import { generateCSRFToken } from "@modules/common";

const csrfToken = await generateCSRFToken();

const res = await fetch(import.meta.env.PUBLIC_DOMAIN + "/api/data", {
  headers: {
    "X-CSRF-Token": csrfToken,
  },
});
const result = await res.json();
---

<Layout title="Welcome to Astro.">
  <section>
result : {result}
  </section>
</Layout>

CSRF Token生成API路由代码 #

import type { APIRoute } from "astro";
import CryptoJS from "crypto-js";
import { setCookie } from "@modules/common";

export const GET: APIRoute = async ({ cookies, request }) => {
  const csrfToken = CryptoJS.lib.WordArray.random(36).toString(
    CryptoJS.enc.Base64
  );

  setCookie(cookies, "X-CSRF-Token", csrfToken, false, "/", 1);

  return new Response(JSON.stringify({ csrfToken }), {
    status: 200,
  });
};

核心问题 #

在上述API的GET请求处理逻辑中，使用cookies.get可以正常获取到Cookie值，但在页面组件的前端matter（即组件顶部的---代码块内）或middleware.ts中调用cookies.get，却无法获取到刚设置的Cookie。目前临时解决方法是将fetch请求移至script标签内，此时就能正常访问设置后的Cookie值。

需求 #

希望在页面前端matter中发起GET请求设置Cookie后，能够直接在前端matter中访问到该Cookie的值。

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