Flutter网络请求异常：调用自有接口失败，出现ChromeProxyService报错

问题情况 #

• 开发的Flutter应用调用Google接口功能正常，但切换到自有网站接口后无法正常工作
• 初始可正常运行的请求代码（参考pub dev示例）：

Future<void> sendPost(String path, String hashMap) async {
    switch (hashMap) {
        case 'getArtifactData':
            var url = Uri.https(
                    'www.googleapis.com', '/books/v1/volumes', {'q': '{http}'});
            var response = await http.get(url);
            if (response.statusCode == 200) {
                setState(() {
                    _scanBarcode = response.body;
                });
            } else {
                _scanBarcode = 'Response status: ${response.statusCode}';
            }
            print('Response status: ${response.statusCode}');
            print('Response body: ${response.body}');
            break;

        default:
            null;
    }
}

• 修改为自有接口后的代码（请求失效）：

Future<void> sendPost(String path, String hashMap) async {
    switch (hashMap) {
        case 'getArtifactData':
            var url = Uri.https(
                    'trivia.lifeupps.com', '/scripts/get_artifact_data', {'id': '1'});
            var response = await http.get(url);
            if (response.statusCode == 200) {
                setState(() {
                    _scanBarcode = response.body;
                });
            } else {
                _scanBarcode = 'Response status: ${response.statusCode}';
            }
            print('Response status: ${response.statusCode}');
            print('Response body: ${response.body}');
            break;

        default:
            null;
    }
}

• 伴随报错：ChromeProxyService: 无法计算表达式'reasonPhrase'

排查与解决建议 #

• 检查跨域配置
  若在Chrome浏览器调试Flutter Web应用，自有接口大概率未配置CORS跨域规则。Google接口默认支持跨域，所以无此问题。需要后端在响应中添加跨域允许头，调试环境可设置：Access-Control-Allow-Origin: *，生产环境建议指定具体域名，同时确保允许GET请求方法。

• 验证接口可用性
  直接在浏览器地址栏访问https://trivia.lifeupps.com/scripts/get_artifact_data?id=1，确认是否能正常返回数据。如果浏览器也无法访问，说明接口本身存在问题，比如服务器未启动、路径错误、参数不合法或权限限制。另外要确认接口是否支持GET请求，部分接口仅接受POST方法。

• 忽略调试器无关报错
  ChromeProxyService: 无法计算表达式'reasonPhrase'属于调试器自身问题，和请求失败无直接关联。重点关注控制台输出的Response status和Response body，根据状态码排查：403是权限拦截，404是路径错误，500是服务器内部错误。

• 添加异常捕获逻辑
  给http请求添加try-catch块，捕获网络连接超时、DNS解析失败等异常，更精准定位问题：

Future<void> sendPost(String path, String hashMap) async {
  switch (hashMap) {
    case 'getArtifactData':
      try {
        var url = Uri.https(
            'trivia.lifeupps.com', '/scripts/get_artifact_data', {'id': '1'});
        var response = await http.get(url);
        if (response.statusCode == 200) {
          setState(() {
            _scanBarcode = response.body;
          });
        } else {
          _scanBarcode = '响应状态码: ${response.statusCode}';
        }
        print('响应状态码: ${response.statusCode}');
        print('响应内容: ${response.body}');
      } catch (e) {
        print('请求异常: $e');
        _scanBarcode = '请求异常: $e';
      }
      break;
    default:
      null;
  }
}

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