Flutter Web连接本地Dart音视频服务器失败，Android端正常求解决

1. 处理CORS预检请求 #

浏览器发起跨域请求前会发送OPTIONS预检请求，服务器必须正确响应才能通过校验：

if (request.method == 'OPTIONS') {
  request.response.headers.addAll({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': '*',
  });
  request.response.statusCode = HttpStatus.ok;
  await request.response.close();
  return;
}

未处理OPTIONS请求会导致浏览器阻止实际请求，触发加载失败。

2. 修正Content-Range格式错误 #

HTTP规范要求Content-Range的end值是文件最后一个字节的索引（即length-1），而非文件总长度，否则浏览器无法正确解析响应：

int end = positions.length < 2 || int.tryParse(positions[1]) == null
    ? length - 1
    : int.parse(positions[1]);
end = end > length - 1 ? length - 1 : end; // 确保索引不越界

// 修正后的Content-Range会符合规范
response.headers.add('Content-Range', 'bytes $start-$end/$length');

3. 兼容普通GET请求 #

当前服务器仅处理带Range头的请求，若浏览器发送普通GET请求（无Range头），需返回200状态码的完整响应：

final rangeHeader = req.headers.value('range');
if (rangeHeader == null) {
  response.statusCode = HttpStatus.ok;
  response.headers
    ..contentType = ContentType.parse(mime ?? 'audio/mpeg')
    ..contentLength = length;
  await file.openRead().pipe(response);
  return;
}
// 后续处理Range请求逻辑

4. 解决浏览器混合内容限制 #

如果Web应用部署在HTTPS环境下（包括本地HTTPS开发服务），访问HTTP协议的本地服务器会被浏览器拦截：

• 临时方案：在Chrome浏览器中允许该站点加载不安全内容：设置 → 隐私和安全 → 站点设置 → 不安全内容 → 添加Web应用地址（如http://localhost:62278）
• 永久方案：为本地Dart服务器配置HTTPS自签名证书

• 检查前端请求代码：确认just_audio/video_player是否正确设置自定义请求头，示例：

await player.setAudioSource(
  AudioSource.uri(
    Uri.parse('http://192.168.1.39:49359/audio'),
    headers: {'Your-Custom-Header': 'value'},
  ),
);

• 查看浏览器开发者工具：打开Chrome DevTools的Network标签，找到对应音视频请求，检查Request Headers是否包含自定义头。若未发送，是前端代码问题；若已发送但服务器没收到，排查中间代理或服务器逻辑。
• 服务器打印完整请求头：添加日志确认所有接收的请求头：

req.headers.forEach((key, values) => print('$key: ${values.join(',')}'));

• 排除代理干扰：如果Web应用通过代理访问服务器，代理可能过滤请求头，直接访问服务器地址进行测试。

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