部署为Firebase云函数的Nuxt应用出现CORB拦截资源加载问题如何解决

• 核心触发原因是Firebase Hosting路由规则优先级错误，所有请求包括/_nuxt/*、/img/*这类静态资源请求都被转发给SSR云函数处理，云函数返回了HTML内容而非对应的JS、图片资源，浏览器拿到MIME类型不匹配的响应后触发CORB拦截。
• 偶发的Could not handle the request错误来自两方面：一是云函数冷启动超时、并发不足；二是大量异常静态资源请求打到云函数，导致服务端负载过高响应失败。

1. 调整Firebase Hosting路由优先级 #

静态资源优先走Firebase Hosting CDN，不转发给云函数，修改firebase.json配置：

{
  "hosting": {
    "public": "dist/client", // 替换为Nuxt打包后客户端静态资源输出目录
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 静态资源路由优先匹配，直接返回CDN资源
      {
        "source": "/_nuxt/**",
        "destination": "/_nuxt/**"
      },
      {
        "source": "/img/**",
        "destination": "/img/**"
      },
      {
        "source": "/favicon.ico",
        "destination": "/favicon.ico"
      },
      // 其余动态请求转发给SSR云函数
      {
        "source": "**",
        "function": "turniejomat" // 替换为你的云函数名称
      }
    ]
  }
}

2. 配置Nuxt公共路径适配部署前缀 #

如果云函数挂载在子路径下，需要在Nuxt配置中指定base路径，避免资源路径错误：

• Nuxt 3配置（nuxt.config.ts）：

export default defineNuxtConfig({
  app: {
    baseURL: '/turniejomat/', // 替换为你的云函数挂载路径，首尾保留斜杠
    buildAssetsDir: '/_nuxt/'
  }
})

• Nuxt 2配置（nuxt.config.js）：

export default {
  router: {
    base: '/turniejomat/'
  },
  build: {
    publicPath: '/_nuxt/'
  }
}

3. 云函数增加异常拦截与响应头配置 #

在云函数入口增加请求过滤和响应头设置，避免异常响应触发CORB：

import { onRequest } from "firebase-functions/v2/https";
import nuxt from "./.output/server/index.mjs"; // 替换为Nuxt打包后的服务端入口路径

const handle = nuxt.handler;

export const turniejomat = onRequest(async (req, res) => {
  // 统一添加安全响应头
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  // 拦截误进入云函数的静态资源请求，直接返回404
  if (req.path.startsWith('/_nuxt/') || req.path.startsWith('/img/')) {
    return res.status(404).send('Not Found');
  }
  return handle(req, res);
});

4. 优化云函数配置减少请求失败 #

调整云函数的内存和超时配置，降低冷启动失败概率：

export const turniejomat = onRequest({
  memory: "1GiB",
  timeoutSeconds: 60,
  region: "us-central1" // 替换为你的云函数部署区域
}, async (req, res) => {
  // 业务逻辑
})

最后验证 #

重新执行Nuxt打包命令，同时部署Firebase Hosting和云函数，清理浏览器缓存后访问即可。

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