当我在 Astro frontmatter 中获取时无法访问 Cookie

问题描述 投票:0回答:1

天文信息

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。 这是我的 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>

generateCSRFToken 函数将发送另一个获取请求,如下所示

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,
  });
};

问题是,如果我尝试在 GET 请求中使用 cookies.get 来访问 cookie 值,我会得到该值,但如果我在前文或 middleware.ts 中使用 cookies.get,我将无法获取该值。来获取该值。所以,我临时采取的办法是将 fetch 请求移至 script 标签,这样就解决了发送 GET 请求后无法访问 cookie 值的问题。

链接到最小可重复示例

https://stackblitz.com/edit/github-9qeh1c?file=src%2Fpages%2Findex.astro

在 frontmatter 中发送设置 cookie 值的 GET 请求后,我希望能够访问之前在 frontmatter 中设置的 cookie 的值。

server-side-rendering cloudflare astrojs
1个回答
0
投票

我目前的解决方案是在 frontmatter 中实现我想要的(发送 GET 请求)。

---
import Layout from "@layouts/Layout.astro";
import { GET } from "../api/generateCSRFToken";
import { GET as GET2 } from "../api/data"

const result1 = await GET(Astro);
const { csrfToken } = await result1.json();

Astro.request.headers.set("X-CSRF-Token", csrfToken);
const res2 = await GET2(Astro);

const result = await res2.json();
console.log(result)
---
© www.soinside.com 2019 - 2024. All rights reserved.