Flutter Web如何用Dio（或其他库）携带Cookie发起HTTP请求？

你的核心需求是Web端请求携带Secure+HttpOnly Cookie，Cookie作用域覆盖example.com主域及auth.example.com、keycloak.example.com子域。以下是除Dio外的可行替代方案，均适配Web端原生Cookie安全机制：

1. 官方http库 #

这是最基础的HTTP请求库，Web端可直接依托浏览器原生Cookie管理能力，无需额外插件：

• 核心优势：浏览器会自动根据Cookie的Domain（需后端设置为example.com）、Secure、HttpOnly属性，在请求对应域名时自动携带Cookie，跨子域名场景完全适配。
• 示例代码：

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

void main() async {
  // 浏览器自动携带符合规则的Cookie，无需手动处理
  final response = await http.get(Uri.parse('https://example.com/user-profile'));
  print(response.body);
}

2. Chopper #

基于官方http库的代码生成工具，适合结构化REST API调用，同样依赖浏览器原生Cookie机制：

• 核心优势：通过注解定义API接口，自动生成请求代码，简化复杂API场景的开发，Cookie管理完全由浏览器负责。
• 基础示例：

import 'package:chopper/chopper.dart';

// 定义API服务
@ChopperApi(baseUrl: '/user-profile')
abstract class UserApi extends ChopperService {
  static UserApi create([ChopperClient? client]) {
    return _$UserApi(client ?? ChopperClient(baseUrl: Uri.parse('https://example.com')));
  }

  @Get()
  Future<Response> getUserProfile();
}

void main() async {
  final api = UserApi.create();
  final response = await api.getUserProfile();
  print(response.body);
}

3. http_interceptor #

用于扩展官方http库的拦截器能力，可自定义请求日志、头信息等逻辑，不干扰浏览器Cookie自动携带：

• 核心优势：在保留原生Cookie机制的前提下，添加自定义拦截逻辑，满足日志、鉴权头等扩展需求。
• 示例代码：

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

// 自定义日志拦截器
class LoggingInterceptor implements Interceptor {
  @override
  Future<RequestData> interceptRequest({required RequestData data}) async {
    print('请求信息：${data.method} ${data.url}');
    return data;
  }

  @override
  Future<ResponseData> interceptResponse({required ResponseData data}) async {
    print('响应状态：${data.statusCode}');
    return data;
  }
}

void main() async {
  final client = InterceptedClient.build(
    interceptors: [LoggingInterceptor()],
  );
  final response = await client.get(Uri.parse('https://example.com/user-profile'));
  print(response.body);
}

关键注意事项 #

1. HttpOnly Cookie的安全限制：Web端中HttpOnly Cookie无法通过任何Dart/JS代码直接读写，完全由浏览器安全管控，代码层面无需手动管理这类Cookie。
2. 后端Cookie配置要求：后端设置Cookie时必须指定Domain=example.com，同时开启Secure和HttpOnly属性，这样auth.example.com、keycloak.example.com设置的Cookie才能被所有example.com子域的请求携带。
3. 放弃手动CookieJar管理：你之前使用CookieJar的方式在Web端无法真正处理HttpOnly Cookie（代码无权限访问），正确做法是依赖浏览器原生Cookie机制，无需手动模拟存储。

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