Flutter移动端API调用中如何传递Basic Authentication凭证？

别担心，我之前也踩过类似的坑，其实实现起来没那么复杂，核心就是对齐Postman里的逻辑：把邮箱:密码转成Base64编码，再在请求头里带上正确格式的认证信息。下面给你两种靠谱的实现方式，还有常见问题的排查点：

方法一：手动构建认证头（适合理解底层逻辑） #

这种方式能让你清晰看到整个编码和请求头设置的流程，方便排查问题：

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

Future<void> callProtectedApi() async {
  // 替换成你的实际邮箱和密码
  final String email = 'your_email@example.com';
  final String password = 'your_password';

  // 1. 按规则拼接邮箱和密码（冒号分隔）
  final String credentials = '$email:$password';
  // 2. 先转UTF-8编码，再做Base64转换（这一步很关键，别直接对字符串编码）
  final String encodedCredentials = base64.encode(utf8.encode(credentials));
  // 3. 构建请求头，添加Basic认证字段
  final Map<String, String> headers = {
    'Authorization': 'Basic $encodedCredentials',
    // 如果API要求其他头信息，比如Content-Type，记得加上
    'Content-Type': 'application/json',
  };

  try {
    final response = await http.get(
      Uri.parse('https://your-api-domain.com/protected-endpoint'),
      headers: headers,
    );

    if (response.statusCode == 200) {
      // 请求成功，处理响应数据
      print('请求成功：${response.body}');
    } else {
      // 打印错误详情，方便排查服务器返回的问题
      print('请求失败，状态码：${response.statusCode}，响应内容：${response.body}');
    }
  } catch (e) {
    print('请求过程出错：$e');
  }
}

方法二：使用http包自带的工具类（更简洁，推荐） #

http包已经封装了Basic认证的处理逻辑，不用手动编码，能避免一些低级错误：

import 'package:http/http.dart' as http;

Future<void> callProtectedApiWithHelper() async {
  final String email = 'your_email@example.com';
  final String password = 'your_password';

  // 创建Basic认证凭证对象
  final authCredentials = http.BasicAuthCredentials(email, password);
  // 直接用凭证生成认证头，同时可以追加其他需要的头信息
  final headers = {
    ...authCredentials.toHeaders(),
    'Content-Type': 'application/json',
  };

  try {
    final response = await http.get(
      Uri.parse('https://your-api-domain.com/protected-endpoint'),
      headers: headers,
    );

    if (response.statusCode == 200) {
      print('请求成功：${response.body}');
    } else {
      print('请求失败，状态码：${response.statusCode}，响应内容：${response.body}');
    }
  } catch (e) {
    print('请求过程出错：$e');
  }
}

常见错误排查点 #

如果还是报错，可以检查这几个地方：

• 确认邮箱和密码和Postman里用的完全一致，没有拼写或大小写错误
• 确保编码时用的是UTF-8（Dart里的utf8.encode是正确的，不要直接对字符串做Base64编码）
• 检查Authorization字段的格式：必须是Basic （注意后面有个空格）加上编码后的字符串，别漏了空格
• 对比Postman的请求头和你Flutter代码里的，看看有没有遗漏其他必填的头信息

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