Flutter Web发送API请求时body传嵌套Map报错如何解决

问题根因 #

你出现这个错误是因为你使用了application/x-www-form-urlencoded作为请求的Content-Type，这种格式本身仅支持单层的字符串键值对，不支持嵌套Map结构，Flutter的http库要求该格式下body所有值都必须是String类型，你传入嵌套Map自然会抛出类型不匹配的错误。

另外：x-www-form-urlencoded格式本身不支持直接传递嵌套结构，你需要根据后端的接口要求选以下两种方案修改。

解决方案 #

方案1：修改为JSON格式请求（推荐，适配你给出的嵌套结构要求） #

如果后端支持接收JSON格式的请求，直接修改Content-Type，并且将整个body序列化为JSON字符串即可，这也是最符合你给出的目标参数结构的方案：

1. 首先导入dart的转换库：

import 'dart:convert';

2. 修改请求代码：

var response = await http.post(Uri.parse(url),
    headers: {
      // 修改Content-Type为json格式
      "Content-Type": "application/json",
    },
    // 用jsonEncode将整个嵌套Map转为字符串
    body: jsonEncode({
      "title": {
        "kr": kr_title,
        "en": en_title,
        "jp": jp_title,
        "ch": ch_title
      },
      "content": {
        "kr": kr_content,
        "en": en_content,
        "jp": jp_content,
        "ch": ch_content
      }
}));

方案2：后端强制要求x-www-form-urlencoded格式 #

如果后端不支持JSON请求，必须用表单格式，你需要将嵌套结构扁平化为单层键值对，键名按后端约定的规则拼接（通常是父键[子键]的格式）：

var response = await http.post(Uri.parse(url),
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    // 扁平化后的单层Map，所有值都是String类型
    body: {
      "title[kr]": kr_title,
      "title[en]": en_title,
      "title[jp]": jp_title,
      "title[ch]": ch_title,
      "content[kr]": kr_content,
      "content[en]": en_content,
      "content[jp]": jp_content,
      "content[ch]": ch_content,
});

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