Flutter Dio/http中与React Axios的withCredentials等效的代码是什么？

核心原因说明 #

1. 后端要求传入的Access-Control-Allow-Credentials是服务端返回的响应头，不需要客户端在请求头中传入，添加该请求头对解决问题无任何帮助，建议先删除该配置。
2. Axios运行在浏览器环境时，浏览器会自动管理Cookie的存储和发送，但Flutter为原生运行环境，没有内置的全局Cookie自动管理机制，同时Dio默认未开启携带Cookie的配置，导致服务端无法获取到登录态Cookie，返回401错误。

具体修复步骤 #

1. 添加依赖 #

在pubspec.yaml中添加Dio相关的Cookie管理依赖：

dependencies:
  dio: ^5.4.0
  dio_cookie_manager: ^3.1.1
  cookie_jar: ^4.0.8
  # 如果需要持久化Cookie（App重启后仍保留登录态），额外添加
  path_provider: ^2.1.2

2. 初始化Dio并配置Cookie管理 #

全局复用同一个Dio实例，不要每次请求都新建实例，避免Cookie丢失：

import 'package:dio/dio.dart';
import 'package:dio_cookie_manager/dio_cookie_manager.dart';
import 'package:cookie_jar/cookie_jar.dart';

// 全局Dio实例，初始化一次即可
final Dio dio = Dio(BaseOptions(
  baseUrl: BASE_URL,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  // 对应Axios的withCredentials配置，允许携带Cookie
  withCredentials: true,
));
final CookieJar cookieJar = CookieJar();

// 初始化时挂载Cookie管理器，自动处理Cookie的保存和发送
void initDio() {
  dio.interceptors.add(CookieManager(cookieJar));
}

如果需要持久化Cookie，替换CookieJar为PersistCookieJar即可：

import 'package:path_provider/path_provider.dart';

Future<void> initDio() async {
  final appDir = await getApplicationDocumentsDirectory();
  final persistCookieJar = PersistCookieJar(
    ignoreExpires: true,
    storage: FileStorage("${appDir.path}/cookies/"),
  );
  dio.interceptors.add(CookieManager(persistCookieJar));
}

3. 发起请求 #

使用全局的Dio实例发起请求即可：

var response = await dio.post(
  "/你的接口路径",
  data: {/* 请求参数 */},
);

排查验证 #

如果配置完成后仍有问题，按以下步骤排查：

• 确认调用需要登录的接口前，已经调用过登录接口，且登录接口返回的Cookie已被正常存储
• 抓包对比Flutter请求和Axios请求的Cookie请求头，确认登录态Cookie是否正常携带
• 确认服务端返回的Cookie的Domain、Path配置和你请求的接口域名、路径匹配

内容的提问来源于stack exchange，提问作者Golam Sarwar Shakil