跨源读取阻止 (CORB) 阻止部署为 Firebase 云功能的 Nuxt 应用程序的脚本和图像加载

Cross-Origin Read Blocking (CORB) blocks scripts and images loading for Nuxt app deployed as Firebase cloud function

我上传了一个 Nuxt 应用作为 Firebase 云功能。当我访问该应用程序时,它只加载了一部分,并且控制台中显示了一堆跨域读取阻塞 (CORB)。 错误与存储在 public 文件夹中并在 HTML 中请求的图像和脚本相关,这些图像和脚本呈现为云函数的响应。问题原因示例:

<link rel="preload" href="/_nuxt/90bbcfe.js" as="script">

Link to the app,所以可以看到'real world'中的错误。有时会出现错误 Could not handle the request 而不是页面,因此您可能需要多试几次。如果您知道为什么会出现此其他错误,我也很想知道。

我怎样才能让它发挥作用?

你暴露的问题是nuxt生成和部署资产的方式。 当您到达您的云函数端点时,该函数本身 returns 向客户端发送一个网页,该网页要求浏览器加载其他资产。

假设资产是“_nuxt/90bbcfe.js”,翻译成这个完整的 URL:“https://us-central1-turniejomat.cloudfunctions.net/_nuxt/90bbcfe.js

当浏览器尝试加载该资源时,它希望获得 text/javascript 或 application/javascript 作为响应,但得到的却是 text/html,因此是 CORB:如果您尝试加载 javascript 源,但服务器提供了 HTML,浏览器认为有恶意的东西可能会损害您的系统并阻止请求。

实际上,上面的完整 url 重定向到 Google AppEngine HTML 页面,该页面要求您使用 google 登录才能使用该应用程序。

我不知道此登录页面是否是您应用程序的一部分,但如果您不认识该登录页面,我怀疑您没有正确配置 firebase 托管 将所有流量重定向到您的函数。可以找到一个示例 here

但是,如果您不需要 SSR 部署选项,我建议您停止使用 Cloud Functions 来托管 Nuxt WebApps,并开始使用 generate 命令构建静态预渲染的 webapp ,然后将其上传到 Firebase Hosting,这是专门为此任务设计的 CDN。

您绝对可以继续使用 Cloud Functions 作为您的网络应用程序的后端。