Nuxt Cloudflare 部署 prefetch 导致 503 问题

在使用 Nuxt 部署到 Cloudflare Worker 或通过 Cloudflare 代理的项目中，可能会遇到以下错误：

net::ERR_ABORTED 503 (Service Unavailable)

通常发生在页面请求资源（JS/CSS 等）时，特别是当浏览器尝试 prefetch 或 preload 资源时。

问题原因

• Nuxt 默认会为页面路由生成 <link rel="prefetch"> 和 <link rel="preload"> 标签。
• Cloudflare 的缓存或 Worker 可能会阻止某些并发请求，导致预加载资源返回 503。
• 在高并发或边缘节点上，prefetch 资源请求可能触发 Cloudflare 的限流或错误响应。

解决方法

可以在 Nuxt 配置中禁用所有预加载和预取资源：

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    "build:manifest": (manifest) => {
      for (const key in manifest) {
        const file = manifest[key];
        file.preload = false; // 禁用 preload
        file.prefetch = false; // 禁用 prefetch
      }
    },
  },
});

这样生成的 HTML 就不会包含 prefetch 或 preload 标签，从而避免 Cloudflare 返回 503。

额外优化建议

1. 针对生产环境禁用 prefetch 如果你仍希望在本地开发使用 prefetch，可以在 nuxt.config.ts 中做环境判断：

const isProd = process.env.NODE_ENV === "production";

export default defineNuxtConfig({
  hooks: {
    "build:manifest": (manifest) => {
      if (isProd) {
        for (const key in manifest) {
          const file = manifest[key];
          file.preload = false;
          file.prefetch = false;
        }
      }
    },
  },
});

2. Cloudflare 页面规则

   • 确保 Cloudflare 缓存策略允许 JS/CSS 等静态资源正常返回。
   • 对 Worker 或边缘缓存请求，可以考虑增加 Cache-Control 或 cf-cache-status 设置。

3. 监控 503

   • 在 Cloudflare Dashboard 中查看 Worker 或边缘节点日志。
   • 确认 503 是由预加载请求触发，而不是服务端 SSR 本身的问题。

总结

• Nuxt 默认 prefetch 可能导致在 Cloudflare 代理下出现 net::ERR_ABORTED 503。
• 使用 build:manifest hook 禁用 prefetch 和 preload 可以解决该问题。
• 结合环境判断和 Cloudflare 缓存优化，可以兼顾开发体验和生产稳定性。