Azure Web App中iOS/Safari无法加载MP4文件的技术求助

首先明确：你的Azure Web App是Linux容器环境，web.config是Windows IIS的配置文件，Linux环境完全不识别，所以放了也不会生效，这是核心误区。

iOS/Safari加载视频要求服务器支持范围请求（Range Requests），也就是返回206 Partial Content状态码，而你当前用的pm2 serve默认静态文件服务没有开启这个功能，导致Safari无法正常加载视频。

下面是几个可行的解决方案：

方案1：替换为支持范围请求的静态文件服务器 #

放弃pm2 serve，改用serve包（npm官方的静态文件服务器，默认支持范围请求）：

1. 安装serve：npm install -g serve
2. 修改Azure Web App的启动命令为：serve /home/site/wwwroot -s
   • -s参数是单页应用模式，适配React的路由规则，避免刷新页面404

方案2：自定义Express服务（保留pm2） #

如果一定要用pm2，需要自己写一个简单的Express服务来处理静态文件，手动开启范围请求支持：

1. 在/home/site/wwwroot目录下创建server.js文件，内容如下：

const express = require('express');
const path = require('path');
const app = express();

// 配置静态文件服务，为MP4添加范围请求支持
app.use(express.static(path.join(__dirname), {
  setHeaders: (res, filePath) => {
    if (filePath.endsWith('.mp4')) {
      res.setHeader('Accept-Ranges', 'bytes');
    }
  }
}));

// 处理React单页应用的路由回退
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

// 监听Azure分配的端口（必须用process.env.PORT，不能硬编码）
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

2. 安装依赖：npm install express
3. 修改启动命令为：pm2 start server.js --no-daemon

方案3：用Azure Blob存储+CDN（推荐，兼顾性能） #

把MP4视频放到Azure Blob存储，然后配置Azure CDN：

• Blob存储默认支持范围请求，CDN会自动继承这个特性
• 修改React应用中视频的引用路径为CDN地址
• 这种方式不仅解决Safari的问题，还能大幅提升全球用户的视频加载速度

验证配置是否生效 #

用curl测试范围请求：

curl -H "Range: bytes=0-1023" -I https://你的webapp域名/视频路径.mp4

如果返回的状态码是206，说明配置成功，iOS/Safari就能正常加载视频了。

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