React应用Azure部署后出现MIME类型脚本执行错误求助

这个错误本质是Azure返回的JS/CSS文件被标记为text/html类型，而非正确的可执行MIME类型，常见原因是单页应用路由配置或资源路径问题，针对Create React App（无需eject）的解决方案如下：

• 修正资源路径配置
  在项目根目录的package.json中添加"homepage": "."，执行npm run build重新构建。这会让build产物中的JS/CSS引用变为相对路径，避免Azure部署时路径解析错误。

• 配置Azure单页应用路由 fallback
  如果使用Azure Static Web Apps，在项目根目录创建staticwebapp.config.json，内容如下：

  {
    "routes": [
      {
        "route": "/*",
        "serve": "/index.html",
        "statusCode": 200
      }
    ]
  }
  

  如果是部署到Azure Storage静态网站，进入存储账户的静态网站设置，将索引文档路径和错误文档路径都设置为index.html，确保刷新子路由时不会返回404页面（被识别为text/html）。

• 批量修正Azure存储的MIME类型
  如果存储账户中JS/CSS文件的MIME类型被错误标记，可通过Azure CLI批量更新：

  az storage blob service-properties update --account-name <你的存储账户名> --static-website --404-document index.html --index-document index.html
  

  也可手动进入容器修改单个文件的属性：将JS文件的内容类型设为application/javascript，CSS文件设为text/css。

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