使用Strapi作为CMS的Next.js应用Vercel部署时随机JSON解析错误排查

你遇到的是Next.js静态生成阶段随机触发的JSON解析错误，核心原因是Strapi偶尔返回HTML响应而非预期的JSON数据，以下是常见诱因及对应修复方案：

可能的原因 #

• Strapi实例冷启动/资源不足：若Strapi部署在Serverless容器（如Vercel Serverless、Railway免费层）或带自动休眠的主机，首次请求或资源紧张时，服务会返回加载/错误类HTML页面（比如503 Service Unavailable页面），而非标准JSON数据。
• 网络波动或请求超时：Vercel构建服务器与Strapi实例间的网络偶尔不稳定，导致请求未被正常处理，返回网关错误的HTML页面（比如502 Bad Gateway）。
• 认证/权限异常：环境变量API_TOKEN可能存在加载延迟，或是Strapi权限配置偶尔触发非预期拦截，返回403/401的HTML错误页（而非Strapi标准的JSON格式错误响应）。

修复方案 #

1. 给请求添加错误处理与重试逻辑 #

修改你的request方法，先校验响应状态再处理解析，同时增加重试机制应对偶发故障：

// 可使用p-retry库实现重试，也可自行编写简单逻辑
import pRetry from 'p-retry';

const request = async <T>(endpoint: string, parameters: Object): Promise<strapiResponse<T>> => {
  return pRetry(async () => {
    const headers = {
      Authorization: `Bearer ${process.env.API_TOKEN}`,
      'Accept': 'application/json' // 明确要求JSON格式响应
    };
    const req = await fetch(endpoint, { ...parameters, headers });

    // 先校验响应状态
    if (!req.ok) {
      const errorContent = await req.text();
      throw new Error(`Strapi请求失败: ${req.status} - ${errorContent}`);
    }

    try {
      const data = await req.json();
      return data;
    } catch (parseErr) {
      // 解析失败时抛出错误，触发重试逻辑
      const rawContent = await req.text();
      throw new Error(`JSON解析失败，响应内容: ${rawContent}`);
    }
  }, {
    retries: 3, // 最多重试3次
    minTimeout: 1000, // 每次重试间隔1秒
  });
};

2. 优化Strapi部署稳定性 #

• 若Strapi使用按需启动服务，配置预热脚本（比如定时请求Strapi的健康检查接口），避免冷启动时返回HTML。
• 升级Strapi所在服务器的资源配额，避免因资源不足导致服务异常返回。

3. 确保认证与权限配置可靠 #

• 在Vercel构建日志中打印API_TOKEN，验证环境变量是否在构建阶段正确加载。
• 在Strapi后台确认对应API的权限配置，确保持有API_TOKEN的角色拥有访问权限；同时检查服务器层面的错误响应配置，尽量统一为JSON格式（Strapi默认返回JSON，但部分服务器级错误可能返回HTML）。

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