Firebase托管React Router单页应用刷新后加载异常（MIME类型错误）

问题场景 #

通过页面导航按钮访问website.com/projects及子路径website.com/projects/project1均正常，但直接输入website.com/projects/、website.com/projects/project1或刷新这些页面时触发MIME类型错误。该问题仅在Firebase托管环境中出现，本地开发运行无异常。

错误信息 #

• Chrome报错：

  Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

• Firefox补充报错：

  样式表https://website.com/projects/assets/index-8ea4127f.css因MIME类型为“text/html”而非“text/css”未加载；模块https://website.com/projects/assets/index-c61e1629.js因不被允许的MIME类型（“text/html”）被拦截，加载失败。

当前Firebase配置 #

已为单页应用配置rewrites规则，firebase.json相关配置片段如下：

{
  "site": "examplewebsite.com",
  "public": "dist",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

dist文件夹结构：

预期与实际结果 #

• 预期：Firebase将所有请求重写至/index.html，由React Router处理路由逻辑并加载对应组件，不存在的路径应触发自定义404页面；
• 实际：触发MIME类型错误，页面显示空白，未触发预期的404页面。

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