部署基于Directus客户端的前端至Vercel/Cloudflare Pages时遇500错误

• 检查Directus SDK的Edge环境兼容性
  Vercel Edge和Cloudflare Pages的Edge Runtime与Node.js环境存在差异，部分Node内置API不可用。确认你使用的@directus/sdk版本不低于10.5.0，该版本开始针对Edge环境做了兼容性优化。初始化客户端时显式指定认证模式，避免依赖Node专属的存储机制：

  import { createDirectus } from '@directus/sdk';
  import { authentication } from '@directus/sdk/auth';
  
  const directus = createDirectus(process.env.DIRECTUS_URL)
    .with(authentication('cookie', {
      autoRefresh: false, // Edge环境禁用自动刷新，规避定时器兼容性问题
    }));
  

• 改用静态令牌替代登录流程
  auth.login()依赖会话存储，在Edge无状态环境下容易出问题。可以直接使用Directus静态令牌绕过登录：

  1. 在Directus后台生成具备对应数据权限的静态令牌
  2. 初始化客户端时使用staticToken扩展：

  import { createDirectus } from '@directus/sdk';
  import { staticToken } from '@directus/sdk/auth';
  
  const directus = createDirectus(process.env.DIRECTUS_URL)
    .with(staticToken(process.env.DIRECTUS_STATIC_TOKEN));
  

  这种方式无需发起登录请求，直接通过令牌完成认证，更适配Edge环境。

• 调整客户端的Fetch配置
  Edge Runtime的Fetch API与Node.js存在细节差异，需显式配置请求参数：

  const directus = createDirectus(process.env.DIRECTUS_URL, {
    fetch: (url, options) => fetch(url, {
      ...options,
      credentials: 'include', // 若使用cookie认证，必须显式设置
    }),
  });
  

• 规范Qwik City的SSR代码执行时机
  确保Directus认证和数据逻辑都包裹在server$函数中，避免在客户端侧触发Edge不支持的操作：

  import { server$ } from '@builder.io/qwik-city';
  
  export const fetchDirectusData = server$(async () => {
    const directus = createDirectus(process.env.DIRECTUS_URL)
      .with(staticToken(process.env.DIRECTUS_STATIC_TOKEN));
    return await directus.items('your-collection').readByQuery({ limit: 10 });
  });
  

• 优化错误日志定位问题
  模糊的e is not a function/t is not a function错误通常是依赖模块在Edge环境未正确打包。添加详细错误捕获：

  try {
    await directus.auth.login({ email: process.env.DIRECTUS_USER, password: process.env.DIRECTUS_PWD });
  } catch (err) {
    console.error('Directus认证错误详情:', err.stack);
    throw err;
  }
  

  在Vercel或Cloudflare的日志面板查看完整错误栈，定位具体缺失的函数或模块。

内容的提问来源于stack exchange，提问作者Aurélien B.