Flutter调用Instagram接口遇XMLHttpRequest/DioError问题求助

问题现象 #

使用http包请求时触发 Flutter Error: XMLHttpRequest error；使用Dio包请求时出现 DioError :The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer。尝试通过HEAD/GET方法发送带自定义请求头的HTTP请求，均无法获取服务器响应，怀疑是请求头配置错误。

请求头配置代码 #

Map<String, String> getHeader() {
  final Map<String, String> HEADERS = {
    "User-Agent": getRandomUserAgent(),
    "Cookie": "",
    "Accept":
        "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
    "Accept-Language": "en-us,en;q=0.5",
    "Access-Control-Allow-Headers": "*",
    "Sec-Fetch-Mode": "navigate",
    "Referer": "https://www.instagram.com/",
  };

  return HEADERS;
}

final userAgents = [
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)    Chrome/95.0.4638.54 Safari/537.36",
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299",
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/17.17134",
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/18.17763",
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/19",
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 OPR/45",
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 OPR/46",
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 OPR/47",
];

getRandomUserAgent() {
  return userAgents[Random().nextInt(userAgents.length)];
}

http包请求代码 #

fetchPostJson(String postID) async {
  print("Entered in FetchPostJson");
  final postUrl = "https://www.instagram.com/p/" + postID;

  print(postUrl);
  fetchFromPage(postUrl, postID);
}

Future<Response?> fetchFromPage(String postUrl, String postID) async {
  final headers = getHeader();

  print("HEADERS:  $headers");

  final apiURL = postUrl;
  print("API URL:  $apiURL");

  final res = await client.head(Uri.parse(apiURL), headers: headers);
  print(res.body);

  var adapter = BrowserHttpClientAdapter();
  adapter.withCredentials = false;
  dio.httpClientAdapter = adapter;
}

Dio包请求代码 #

fetchPostJson(String postID) async {
  print("Entered in FetchPostJson");
  final postUrl = "https://www.instagram.com/p/" + postID;

  print(postUrl);
  pageExist(postUrl, postID);
}

Future<Response?> pageExist(String postUrl, String postID) async {
  final headers = getHeader();

  print("HEADERS:  $headers");

  final apiURL = postUrl;
  print("API URL:  $apiURL");

  try {
    var adapter = BrowserHttpClientAdapter();
    adapter.withCredentials = false;

    final res = await dio.request(apiURL,
        options: Options(
          method: "GET",
          headers: headers,
          responseType: ResponseType.json,
          sendTimeout: Duration(milliseconds: 5000),
          receiveTimeout: Duration(milliseconds: 5000),
        ));
    print("Response data get $res");
    return null;
  } on DioError catch (e) {
    if (e.response != null) {
      print(e.response?.statusCode);
    }
    throw e;
  }
}

排查建议 #

1. 移除非法请求头：Access-Control-Allow-Headers是服务器返回的响应头，不是客户端请求头，发送该字段会被服务器判定为非法请求，直接删除。
2. 补充有效Cookie：Instagram依赖Cookie验证用户合法性，空Cookie会触发反爬拦截。可先通过浏览器访问Instagram，复制当前有效的Cookie值填入请求头的Cookie字段测试。
3. 统一使用GET方法：Instagram帖子页面需要完整内容响应，HEAD方法仅返回头信息，可能被服务器拦截，建议替换为GET方法。
4. 修正User-Agent格式：部分User-Agent存在多余空格（如第一个Chrome UA的Gecko)后有大量空格），清理空格后再发起请求，避免被识别为异常流量。
5. 处理跨域限制：如果是Web平台运行Flutter，浏览器会拦截跨域请求，Instagram不开放CORS，建议通过后端代理转发请求。
6. 对齐浏览器请求头：通过浏览器F12开发者工具查看访问Instagram帖子时的真实请求头，补充缺失的字段（如Sec-Fetch-Site、Sec-Fetch-Dest等），确保请求头与浏览器一致。

内容的提问来源于stack exchange，提问作者Ankit Bourasi I