Angular+Node.js应用部署Azure App Service遇Mime检查错误求助

以下是针对该问题的排查和解决步骤：

1. 修正Node.js静态资源托管的MIME类型配置 #

Azure App Service的Node.js环境可能默认缺少部分MIME类型映射，导致静态资源返回错误类型。可以手动补充MIME类型定义，确保express能正确识别资源：

const express = require('express');
const mime = require('mime-types');
const app = express();

// 补充常见静态资源的MIME类型映射
mime.define({
  'text/css': ['css'],
  'application/javascript': ['js'],
  'text/html': ['html'],
  'image/png': ['png'],
  'image/jpeg': ['jpg', 'jpeg'],
  'font/woff2': ['woff2'],
  'font/woff': ['woff'],
  'font/ttf': ['ttf'],
  'application/json': ['json']
});

// 托管Angular构建后的dist文件夹（替换为你的实际应用名称）
app.use(express.static(__dirname + '/dist/your-angular-app'));

// SPA路由 fallback 处理，避免刷新页面404
app.get('/*', (req, res) => {
  res.sendFile(__dirname + '/dist/your-angular-app/index.html');
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on port ${port}`));

注意：部署时需确认__dirname + '/dist/your-angular-app'路径与Azure上的实际文件结构一致，部分部署工具可能会调整dist的位置。

2. 确认Angular构建配置正确 #

• 构建时指定正确的base-href，如果部署在Azure App Service根路径，使用命令：

  ng build --prod --base-href /
  

  若为子路径，替换为对应路径（比如--base-href /my-app/）。
• 检查构建后的index.html，确保所有资源（CSS、JS、字体等）的引用路径正确，避免出现404——资源找不到时，服务器会返回HTML类型的404页面，触发MIME类型检查错误。

3. 检查Azure App Service环境配置 #

• 进入Azure门户，在你的App Service的配置 -> 常规设置中，确认Node.js版本与本地开发环境一致，版本不兼容可能导致静态资源处理异常。
• 在应用程序设置中添加WEBSITE_NODE_DEFAULT_VERSION，指定你使用的Node版本（比如18.x），避免Azure自动选择不兼容的版本。
• 开启日志流查看具体请求错误，定位是哪个资源返回了错误的MIME类型，针对性解决。

4. 验证部署包完整性 #

确认部署到Azure的包中包含完整的dist文件夹内容，所有构建生成的静态资源（CSS、JS、图片、字体）都存在。如果部署脚本遗漏了dist文件，会导致资源404，进而触发MIME类型错误。

5. 清除Azure缓存并重启服务 #

Azure可能会缓存静态资源，尝试在App Service概述页面点击重启，或者重新触发一次部署，清除缓存后再测试应用。

内容的提问来源于stack exchange，提问作者AVS Kasturi Karthik