Dart/Flutter中Uri.encodeComponent拼接URL不生效问题如何解决？

核心原因排查 #

• 本地存储读取的token携带不可见字符：从LocalStorage取出的accessToken可能包含打印时不可见的换行符、空格、零宽空格、转义残留的反斜杠等字符，控制台打印时这类字符不会显示，你手动复制打印结果拼接时自然不会带这些内容，但代码编码时会将不可见字符一起转义，导致最终生成的URL和手动拼接的实际内容不一致。
• WebView自动二次编码：部分自定义WebView的loadUrl方法会对传入的URL做二次转义，比如已经编码生成的%24会被再次转义为%2524，后端解码后拿到的内容就会出错，而硬编码的字符串可能不会触发二次编码逻辑。
• 控制台输出转义：你看到的打印结果可能是控制台做了转义后的内容，不是编码生成的真实字符串，手动拼接的是转义后的错误值反而碰巧符合后端要求。

解决步骤 #

1. 先验证两个URL的实际一致性，不要只对比肉眼可见的打印内容，运行如下代码对比字符级差异：

var generatedUrl = "something.php?acc_token=" + token;
var manualUrl = "something.php?acc_token=%243d%23";
// 先判断两个字符串是否完全相等
print("URL是否一致：${generatedUrl == manualUrl}");
// 逐个打印字符的Unicode编码，定位差异位置
print("=== 生成的URL字符详情 ===");
for (int i = 0; i < generatedUrl.length; i++) {
  print('索引$i: ${generatedUrl[i]} -> ${generatedUrl.codeUnitAt(i)}');
}
print("=== 手动拼接的URL字符详情 ===");
for (int i = 0; i < manualUrl.length; i++) {
  print('索引$i: ${manualUrl[i]} -> ${manualUrl.codeUnitAt(i)}');
}

如果对比发现有差异，说明token本身包含额外字符，只需要在编码前对token做清洗，比如去掉首尾空白、不可见字符：

var str = await GetUserLocalStorage().accessToken();
// 清洗掉不可见的控制字符、首尾空白
str = str.replaceAll(RegExp(r'[\x00-\x1F\x7F]'), '').trim();
var token = Uri.encodeComponent(str);

2. 避免手动拼接URL，使用官方Uri构造方法自动处理参数编码，从根源避免拼接错误：

// 替换为你实际的协议、域名、路径
final uri = Uri(
  scheme: 'https',
  host: '你的域名',
  path: 'something.php',
  queryParameters: {
    'acc_token': str,
    // 其他查询参数直接加在这里即可，会自动编码
  },
);
url = uri.toString();

3. 如果确认URL完全一致但WebView加载失败，说明WebView触发了二次编码，加载时可以传入已经解码的原始参数，或者调用WebView的loadDataWithBaseURL方法跳过自动编码逻辑。

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