Nuxt 3集成Azure AI部署Cloudflare Pages遇500错误求助

1. 优先排查Cloudflare运行时日志 #

Cloudflare Pages的500是泛用错误提示，必须查看具体日志才能定位问题：

• 登录Cloudflare Dashboard，进入目标Pages项目
• 左侧菜单选择「Functions」→「Logs」，筛选API路由的请求日志
• 查看日志中的具体错误信息（比如环境变量缺失、模块加载失败、认证错误等）

2. 检查环境变量配置 #

本地开发与Cloudflare Pages的环境变量规则存在差异：

• Nuxt的server端runtimeConfig变量需要以NUXT_为前缀，比如本地.env里的NUXT_AZURE_ENDPOINT，在Cloudflare Pages中必须完全一致设置该变量名
• 确保设置环境变量时勾选「Available during runtime」（API路由需要运行时可访问变量）
• 可临时在代码中添加console.log(runtimeConfig)，部署后查看日志确认变量是否被正确注入

3. 修复Azure认证的兼容性问题 #

Cloudflare Workers Runtime（Pages API基于此）对Node.js核心模块支持有限，@azure/identity的ClientSecretCredential可能存在兼容性问题：

• 代码中同时传入apiKey和tokenProvider会导致Azure OpenAI客户端逻辑冲突，建议只保留一种认证方式：
  • 若使用API Key认证，移除tokenProvider相关代码：

    const client = new AzureOpenAI({
      apiVersion: "2024-08-01-preview",
      endpoint: endpointazure,
      apiKey: keyazure,
    });
    

  • 若必须使用服务主体认证，在nuxt.config.ts中添加polyfill配置：

    export default defineNuxtConfig({
      nitro: {
        preset: 'cloudflare_pages',
        externals: {
          inline: ['@azure/identity']
        }
      }
    })
    

4. 完善代码错误处理 #

添加全局try/catch捕获异常，避免未处理错误触发500：

export default defineEventHandler(async (event) => {
  try {
    const runtimeConfig = useRuntimeConfig(event);
    const endpointazure = `${runtimeConfig.azureEndpoint}`;
    const keyazure = `${runtimeConfig.azureKey}`;
    
    // 原代码其余逻辑...
    
  } catch (error) {
    console.error('API Error:', error);
    return { error: error.message || '服务器内部错误' };
  }
});

• 同时处理空请求体情况：在读取body后添加判断

  const body = await readBody<{ chat: ChatMessage[] }>(event);
  if (!body?.chat) {
    console.error('缺少chat参数');
    return { error: '请求参数缺失' };
  }
  

5. 验证Azure OpenAI配置 #

• 确认Azure OpenAI的endpoint完整正确（需包含资源域名，比如https://<resource-name>.openai.azure.com/）
• 验证模型部署名称：Azure中部署的gpt-4o-mini名称需与代码中的model: 'gpt-4o-mini'完全一致（区分大小写）

内容的提问来源于stack exchange，提问作者Raymond Flowers IV