Flutter HTTP请求在Android正常，Chrome与MacOS异常问题排查

运行代码 #

var response = await http.get(
      Uri.parse(
        'https://arkiteki.co/api/v1/questions',
      ),
    );

测试结果 #

• Android：请求正常
• Chrome：报错 Error: XMLHttpRequest error.
• MacOS：提示 connection failed

可能的原因及解决方向 #

1. CORS跨域限制 #

Chrome作为浏览器严格遵循CORS规则，若目标服务器未配置允许当前Web应用域名的跨域请求，就会触发XMLHttpRequest错误。而Android和MacOS原生应用不受浏览器CORS机制约束，因此能正常请求。

• 解决：要求服务器端配置Access-Control-Allow-Origin等CORS响应头，允许你的Web域名访问；开发阶段可通过代理服务器转发请求规避CORS限制。

2. 网络代理/环境差异 #

Chrome可能启用了浏览器专属代理或系统代理，而Android、MacOS原生应用使用的是系统默认网络设置，代理配置不一致导致请求失败。

• 解决：检查Chrome代理设置（设置→高级→系统→打开计算机的代理设置），确保与Android/MacOS使用相同网络环境；尝试关闭代理或切换网络（如从内网切换到家用网络）测试。

3. 浏览器安全策略拦截 #

Chrome的安全策略（如HTTPS证书验证、混合内容拦截）可能阻止请求。若目标服务器的HTTPS证书存在过期、不被信任等问题，浏览器会直接拦截，但Android/MacOS原生应用对证书验证的规则更宽松。

• 解决：直接在Chrome中访问目标API地址，检查是否有证书警告；若为自签名证书，需在Chrome中手动导入信任该证书。

4. Flutter Web HTTP库行为差异 #

Flutter Web中的http库底层基于浏览器XMLHttpRequest实现，而Android/MacOS原生端基于Dart IO库，两者默认行为存在差异，比如请求头设置不同，可能被服务器拒绝。

• 解决：尝试显式设置请求头（如添加User-Agent模拟常规浏览器请求）；或改用dart:html中的HttpRequest直接实现请求，排查是否为库的适配问题。

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