Flutter应用通过HTTP请求拉取Wix数据库数据返回空白页如何解决

已知问题点 #

• 移动端默认未开启网络权限，未配置权限的应用无法发起外部网络请求
• 现有代码catch块未做错误日志打印，无法定位具体异常类型
• 未校验HTTP响应状态码，接口返回异常时直接解析响应体会直接触发异常
• Wix接口默认会校验请求头信息，Flutter默认请求头与Postman请求头不一致会被接口拦截

修复步骤 #

1. 配置应用网络权限 #

Android端

打开android/app/src/main/AndroidManifest.xml文件，在<manifest>根标签下添加网络权限声明：

<uses-permission android:name="android.permission.INTERNET" />

iOS端

打开ios/Runner/Info.plist文件，在<dict>标签内部添加传输安全配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

2. 修改请求代码 #

补充请求头模拟正常客户端请求，增加状态码校验与错误日志打印：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final url = 'https://daudadmin.editorx.io/acteeventpage/_functions/regions';
  List _postsJson = [];
  bool _isLoading = true;
  String? _errorMsg;

  void fetchData() async {
    try {
      // 补充请求头，模拟Postman请求避免被Wix拦截
      final response = await http.get(
        Uri.parse(url),
        headers: {
          "Accept": "*/*",
          "User-Agent": "PostmanRuntime/7.29.0"
        }
      );
      // 先校验响应状态码
      if (response.statusCode == 200) {
        final jsonData = jsonDecode(response.body) as List;
        setState(() {
          _postsJson = jsonData;
          _isLoading = false;
        });
      } else {
        setState(() {
          _errorMsg = "请求异常，状态码：${response.statusCode}，响应内容：${response.body}";
          _isLoading = false;
        });
        debugPrint(_errorMsg);
      }
    } catch (err, stack) {
      setState(() {
        _errorMsg = "请求错误：$err";
        _isLoading = false;
      });
      // 打印错误栈方便定位
      debugPrint("请求异常：$err，堆栈：$stack");
    }
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _buildBody(),
      ),
    );
  }

  Widget _buildBody() {
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    if (_errorMsg != null) {
      return Center(child: Text(_errorMsg!));
    }
    return ListView.builder(
      itemCount: _postsJson.length,
      itemBuilder: (context, i) {
        final post = _postsJson[i];
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("Title: ${post["title"] ?? "无标题"}"),
        );
      }
    );
  }
}

额外说明 #

修改后运行应用，控制台会打印具体的异常信息，可根据打印内容进一步调整配置。如果出现证书校验异常，测试环境可临时配置http客户端忽略证书校验，正式环境需确认Wix域名证书有效性。

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