Flutter中如何从URL获取.bin文件内容？遇XMLHttpRequest错误

核心原因 #

你碰到的XMLHttpRequest error.在Flutter Web场景下基本就是CORS跨域限制——浏览器的安全机制会拦截网页脚本跨域名获取资源的请求，除非后端服务器明确配置了允许你的前端域名访问的规则。

你提到图片、JSON资源能正常访问，说明后端对这些资源的CORS配置是正确的，但.bin文件对应的请求没有匹配到合适的CORS规则，或者规则配置不全。

具体解决方法 #

1. 后端调整CORS配置（优先方案） #

让后端开发人员针对.bin文件的请求，在响应头中添加以下必要配置：

• Access-Control-Allow-Origin: 设置为你的前端域名（例如https://your-flutter-web-domain.com，开发阶段可临时用*允许所有域名，但生产环境不推荐）
• Access-Control-Allow-Methods: 确保包含GET方法
• Access-Control-Allow-Headers: 若请求带有自定义头，需将这些头字段加入该配置

如果你的请求包含自定义头或身份验证信息，后端还需要处理OPTIONS预请求，返回一致的CORS响应头。

2. 本地开发临时绕过CORS（仅调试用） #

本地开发时，可以通过启动参数关闭浏览器的CORS检查：

flutter run -d chrome --web-browser-flag "--disable-web-security"

注意：这个方法仅适用于开发调试，绝对不能用于生产环境，会完全关闭浏览器的跨域安全防护。

3. 修正请求的二进制数据处理 #

另外要注意：.bin是二进制文件，用response.body会把二进制数据转成UTF-8字符串，大概率会出现乱码，正确的做法是用response.bodyBytes获取原始二进制数据，调整后的代码如下：

try {
  String url = '${constants.backPrefix}${file.gpxFilePath}';
  final response = await http.get(Uri.parse(url));
  if(response.statusCode == 200) {
    // 获取二进制原始数据
    debugPrint("获取到二进制数据，长度：${response.bodyBytes.length}");
  } else {
    debugPrint("状态码错误：${response.statusCode}");
  }
} catch (e) {
  debugPrint("异常：$e");
}

额外说明 #

• 移动平台（iOS/Android）不存在CORS问题，因为它们不遵循浏览器的同源策略，只有Flutter Web会触发该限制。
• 浏览器地址栏能直接访问不代表前端脚本能访问：地址栏的请求不受CORS规则约束，但网页内的AJAX请求（包括Flutter Web的http请求）会被浏览器拦截。

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