如何在Preact组件中使用Astro.cookies？生产环境失效问题

核心问题 #

1. Astro.cookies 是服务端专属API：Preact组件如果是客户端 hydrated（比如用了client:load/client:visible等指令），生产环境下会在浏览器中执行，此时Astro对象不存在，自然无法调用Astro.cookies。开发阶段Astro的 dev SSR模式可能有特殊处理，让你误以为客户端能访问，但生产打包后客户端代码里根本没有这个对象。
2. httpOnly Cookie 前端无法设置：浏览器的安全规则禁止前端JavaScript设置httpOnly: true的Cookie，你代码里的这个配置在前端环境下会被直接忽略，开发阶段看似生效大概率是服务端其他逻辑在兜底。

解决办法 #

1. 把Cookie设置逻辑移到服务端（推荐）

创建Astro API路由（比如src/pages/api/login.ts），在服务端处理请求并设置Cookie：

// src/pages/api/login.ts
export async function POST({ request, cookies }) {
  const data = await request.json();
  const sessionId = data.sessionId;
  const maxAge = data.maxAge;

  cookies.set('sessionId', sessionId, {
    httpOnly: true,
    maxAge: maxAge,
    secure: import.meta.env.PROD, // 生产环境开启secure
    path: '/'
  });

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

然后前端Preact组件只需要调用这个API：

// Preact组件里的请求逻辑
const response = await fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ sessionId, maxAge })
});

2. 确保组件是服务端渲染（SSR）组件

如果你的Preact组件不需要客户端交互，可以标记为client:never，让它只在服务端运行，这样就能正常访问Astro.cookies：

---
// Astro页面里引用Preact组件
import LoginComponent from '../components/LoginComponent';
---
<LoginComponent client:never />

但注意这种组件完全不会在客户端hydrate，没有交互能力。

3. 客户端设置非httpOnly Cookie（不推荐敏感数据）

如果你的Cookie不需要httpOnly（比如非敏感的用户偏好），可以直接用浏览器的document.cookie设置，不要用Astro的API：

// Preact组件客户端代码
document.cookie = `sessionId=${sessionId}; max-age=${maxAge}; path=/`;

但这种方式不能设置httpOnly，敏感数据（比如会话ID）绝对不能这么做，容易被XSS攻击窃取。

关于import { AstroCookies } from "astro"失效的原因 #

AstroCookies是服务端构造函数，需要传入请求上下文才能实例化，客户端环境下这个模块要么不存在，要么无法获取到合法的上下文，所以导入后也无法正常使用。

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