React应用部署Azure App Service后MP4静态文件404问题求助

环境与现象 #

• 使用create-react-app创建React应用，部署到Azure App Service Plan（SKU F1）
• 本地运行时背景视频正常加载，部署后浏览器请求MP4文件返回404 Not Found
• 浏览器调试控制台显示MP4加载404，同一目录下的.svg文件可正常加载

浏览器调试信息 #

请求基本信息 #

Request URL: https://abouthorusrm.azurewebsites.net/static/media/typing.203864c7a88151d96941.mp4
Request Method: GET
Status Code: 404 Not Found
Remote Address: 13.89.172.5:443
Referrer Policy: strict-origin-when-cross-origin

请求头 #

Accept: */*
Accept-Encoding: identity;q=1, *;q=0
Accept-Language: en-US,en;q=0.8
Connection: keep-alive
Cookie: ARRAffinity=f4edef8e8ae33d792aa347f6380e743b9805a4dd08725995c30ae1f829052383;ARRAffinitySameSite=f4edef8e8ae33d792aa347f6380e743b9805a4dd08725995c30ae1f829052383
Host: abouthorusrm.azurewebsites.net
Range: bytes=0-
Referer: https://abouthorusrm.azurewebsites.net/
Sec-Ch-Ua: "Not/A)Brand";v="99", "Brave";v="115", "Chromium";v="115"
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: "Windows"
Sec-Fetch-Dest: video
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
Sec-Gpc: 1
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

响应头 #

Content-Length:103
Content-Type: text/html
Date: Sun, 06 Aug 2023 21:41:53 GMT
Server: Microsoft-IIS/10.0
X-Powered-By: ASP.NET

文件存在性验证 #

• 本地构建后文件路径：build/static/media/typing.203864c7a88151d96941.mp4
• 通过Kudu确认服务器对应路径C:\home\site\wwwroot\static\media\typing.203864c7a88151d96941.mp4存在，文件名大小写完全一致

已尝试的解决方案 #

添加web.config配置MP4 MIME类型，但问题未解决，配置内容：

<configuration>
   <system.webServer>
         <staticContent>
            <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
            <mimeMap fileExtension=".webm" mimeType="video/webm" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml">
         </staticContent>
   </system.webServer>
</configuration>

需求 #

解决MP4文件404问题，使其正常作为应用背景视频加载。

1. 修复web.config语法错误 #

你提供的web.config中，<mimeMap fileExtension=".svg" mimeType="image/svg+xml">标签未闭合，这会导致IIS无法正确解析整个staticContent配置节点，直接忽略MIME类型设置。修正后的完整配置：

<configuration>
   <system.webServer>
         <staticContent>
            <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
            <mimeMap fileExtension=".webm" mimeType="video/webm" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
         </staticContent>
   </system.webServer>
</configuration>

2. 重启Azure App Service并清除缓存 #

Azure App Service有时会缓存旧的配置或静态资源，部署修正后的web.config后：

• 登录Azure门户，找到你的App Service实例，点击概述页面的重启按钮
• 也可通过Kudu工具，在Debug console中清理旧文件后重新部署

3. 检查MP4文件权限 #

通过Kudu进入C:\home\site\wwwroot\static\media目录，确认MP4文件的权限设置：确保IIS_IUSRS和Users组拥有读取权限，若权限不足手动添加。

4. 验证MIME类型是否生效 #

重新部署后再次请求MP4文件，查看响应头的Content-Type是否为video/mp4。如果仍为text/html，需确认：

• web.config是否放置在wwwroot根目录下
• App Service的运行时是否正确配置（若为Node.js，需确保静态文件服务已启用）

5. 临时方案：移除文件名哈希值 #

若以上方法均无效，可尝试去掉MP4文件名中的哈希值（例如改为typing.mp4），在React代码中直接引用该文件名，重新构建部署，排除哈希值导致的路径匹配问题。

内容的提问来源于stack exchange，提问作者Jake Steele