# Nuxt Cloudflare 部署 prefetch 导致 503 问题

URL: https://caijiao.org/posts/12
Source: docs/posts/12.md
Description: 解决 Nuxt 项目在 Cloudflare 部署时出现 prefetch 导致的 net::ERR_ABORTED 503 (Service Unavailable) 错误。

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

```txt
net::ERR_ABORTED 503 (Service Unavailable)
````

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

## 问题原因

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

## 解决方法

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

```ts
// 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` 中做环境判断：

```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 缓存优化，可以兼顾开发体验和生产稳定性。