Flutter Web发送带Body的GET请求时遇空Body错误求助

问题根源 #

Chrome等主流浏览器基于XMLHttpRequest规范，不允许GET请求携带请求体（Body），这是Flutter Web端和移动端表现不一致的核心原因——移动端的HTTP实现不受浏览器规范限制，而Web端依赖浏览器的网络栈。

可行解决方案 #

1. 改用POST请求（优先推荐）

如果后端允许调整接口方法，直接将请求方式改为POST是最稳妥的方案，所有平台都能兼容，代码只需修改请求方法：

Map<String, String> header = {};

String? token = SharedPrefsHelper.getString(prefToken);
String langCode = SharedPrefsHelper.getString(prefLanguageCode) ?? "ar";

header['content-type'] = 'application/json';
header["Authorization"] = "bearer $token";
header["Accept-Language"] = langCode;

// 将GET改为POST
final request = Request('POST', Uri.parse(url))..headers.addAll(header);
request.body = json.encode(parameter);
final response = await request.send();

注意：需要确保后端对应的POST接口已配置正确的CORS规则，允许Content-Type: application/json等请求头。

2. 将Body参数转为URL查询参数

如果后端必须使用GET方法，把原本放在Body里的参数拼接成URL的查询参数：

Map<String, String> header = {};

String? token = SharedPrefsHelper.getString(prefToken);
String langCode = SharedPrefsHelper.getString(prefLanguageCode) ?? "ar";

header['content-type'] = 'application/json';
header["Authorization"] = "bearer $token";
header["Accept-Language"] = langCode;

// 将parameter转为查询参数拼到URL上
Uri requestUrl = Uri.parse(url).replace(queryParameters: parameter.cast<String, String>());
final request = Request('GET', requestUrl)..headers.addAll(header);
// 不再设置request.body
final response = await request.send();

如果参数包含非字符串类型，需要先自行序列化（比如数字转字符串）。

3. 特殊场景：使用Fetch API绕过XHR限制（不推荐）

如果后端强制要求GET带Body且无法修改，可以尝试用浏览器原生的Fetch API（Fetch规范允许GET带Body，但兼容性和服务器支持度差），通过dart:js调用：

import 'dart:js' as js;
import 'dart:convert';

Future<dynamic> sendGetWithBody(String url, Map<String, dynamic> params, Map<String, String> headers) async {
  final fetchResponse = await js.context.callMethod('fetch', [
    url,
    js.JsObject.jsify({
      'method': 'GET',
      'headers': js.JsObject.jsify(headers),
      'body': json.encode(params),
      // 若需要跨域带凭证，添加credentials: 'include'
      // 'credentials': 'include',
    })
  ]);
  
  final responseText = await fetchResponse.callMethod('text');
  return json.decode(responseText);
}

// 调用示例
// var result = await sendGetWithBody(url, parameter, header);

⚠️ 注意：很多服务器框架会默认忽略GET请求的Body，即使发送成功也可能无法正确解析，此方法仅作为极端场景的临时方案。

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