使用Azure DevOps部署React应用至Azure App Service时MIME类型错误求助

常见原因及修复步骤 #

1. 静态文件MIME类型配置缺失 #

Azure App Service默认可能未正确配置.js模块文件的MIME类型（比如application/javascript或module类型）。

• 修复：
  • 若使用Windows App Service，在项目根目录添加web.config文件，示例配置：

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <staticContent>
          <remove fileExtension=".js" />
          <mimeMap fileExtension=".js" mimeType="application/javascript" />
        </staticContent>
        <rewrite>
          <rules>
            <rule name="React Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    

  • 若使用Linux容器化部署，检查Dockerfile关联的静态服务配置（比如Nginx的nginx.conf），确保包含正确的MIME映射：

    types {
      application/javascript js;
      text/javascript js;
    }
    

2. React构建产物路径错误 #

本地运行正常但部署后路径配置错误，导致服务器返回HTML页面而非JS文件，MIME类型变为text/html。

• 修复：
  • 确认package.json的homepage字段设置正确：根路径部署设为"homepage": "."，子路径部署对应填写路径。
  • 执行npm run build后，检查build目录内文件路径是否为相对路径，资源引用无错误。
  • 在Azure DevOps部署任务中，确保部署的是build目录下的所有文件，而非项目根目录。

3. 容器服务配置异常（容器化部署场景） #

从容器运行日志排查静态服务配置问题：

• 确认容器内静态服务的根目录指向React的build产物路径（比如Nginx配置的root应为/usr/share/nginx/html，需提前将build文件复制到该路径）。
• 检查容器启动日志，确认静态服务无启动报错。

4. 缓存/CDN干扰 #

浏览器缓存旧资源或Azure CDN返回错误MIME类型：

• 修复：
  • 强制刷新浏览器（Ctrl+Shift+R）清除本地缓存后重试。
  • 若启用Azure CDN，手动清除CDN缓存并检查CDN的MIME类型配置。

额外排查动作 #

• 打开浏览器开发者工具（F12）→网络标签，刷新页面后查看报错JS文件的响应头，确认Content-Type是否为application/javascript或text/javascript。若返回text/html，说明服务器返回了404对应的HTML页面，需重点检查文件路径配置。
• 查看Azure App Service门户的“日志流”，排查是否存在文件找不到的错误日志，对应调整部署路径或服务配置。

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