Flutter Web中Http请求无法发送Cookie头，该如何修复？

问题详情 #

• 跨平台调用API时，Android和iOS端通过Http包手动设置Cookie请求头进行认证，一切正常；但Web端测试时调用失败，浏览器抛出错误：Refused to set unsafe header "Cookie"
• 本地开发环境和部署到安全域名的生产环境均存在该问题
• 已尝试修改服务器CORS策略，允许对应的本地端口和域名，但无效果
• 测试过启用BrowserClient的withCredentials=true，并保留手动设置Cookie头的代码，结果依然失败

原测试代码（普通Http调用）：

Future<UserData> getUserData() async {
    try {
      final response = await http.get(
        Uri.parse(_baseUrl),
        headers: {
          'Content-type': 'application/json; charset=utf-8',
          'Cookie': _authHeader,
        },
      );

      if (response.statusCode == 200) {
        return UserData.fromJson(response.body);
      } else {
        return Failure(message: 'Failed to get data!');
      }
    } catch (e) {
      return Failure(message: e.toString());
    }
  }

测试过的BrowserClient版本代码：

Future<UserData> getUserData() async {
    try {
      final webClient = (http.Client() as BrowserClient)
        ..withCredentials = true;

      final response = await webClient.get(
        Uri.parse(_baseUrl),
        headers: {
          'Content-type': 'application/json; charset=utf-8',
          'Cookie': _authHeader,
        },
      );

      if (response.statusCode == 200) {
        return UserData.fromJson(response.body);
      } else {
        return Failure(message: 'Failed to get data!');
      }
    } catch (e) {
      return Failure(message: e.toString());
    }
  }

问题原因 #

浏览器的同源安全策略禁止通过JavaScript手动设置Cookie请求头，这个请求头只能由浏览器自动管理——比如当服务器通过Set-Cookie响应头把Cookie写入浏览器后，后续同域名的请求会自动携带该Cookie。

解决方案 #

方案1：利用浏览器自动管理Cookie（推荐） #

1. 服务器端配置：

   • 登录接口成功认证后，返回Set-Cookie响应头，包含认证所需的Cookie信息
   • 配置CORS策略，确保：
     • Access-Control-Allow-Origin设置为Flutter Web的具体域名（不能是*）
     • Access-Control-Allow-Credentials设置为true
     • Access-Control-Allow-Headers包含Content-Type等必要请求头

2. Flutter Web代码修改：
   使用BrowserClient并启用withCredentials=true，移除手动设置的Cookie头，让浏览器自动携带Cookie：

Future<UserData> getUserData() async {
  try {
    final webClient = (http.Client() as BrowserClient)
      ..withCredentials = true;

    final response = await webClient.get(
      Uri.parse(_baseUrl),
      headers: {
        'Content-type': 'application/json; charset=utf-8',
        // 移除手动设置的Cookie头
      },
    );

    if (response.statusCode == 200) {
      return UserData.fromJson(response.body);
    } else {
      return Failure(message: 'Failed to get data!');
    }
  } catch (e) {
    return Failure(message: e.toString());
  }
}

方案2：改用自定义认证头 #

如果无法依赖浏览器Cookie管理，可以将认证信息放在自定义请求头中，比如Authorization：

1. Flutter代码修改：

Future<UserData> getUserData() async {
  try {
    final response = await http.get(
      Uri.parse(_baseUrl),
      headers: {
        'Content-type': 'application/json; charset=utf-8',
        'Authorization': 'Bearer $_authToken', // 替换为你的认证格式
      },
    );

    if (response.statusCode == 200) {
      return UserData.fromJson(response.body);
    } else {
      return Failure(message: 'Failed to get data!');
    }
  } catch (e) {
    return Failure(message: e.toString());
  }
}

2. 服务器端修改：调整认证逻辑，从Authorization头读取认证信息，而非Cookie。

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