Flutter Web如何正确获取包含Cookie的响应？

核心原因 #

浏览器出于安全和同源策略限制，默认不会将Set-Cookie响应头暴露给前端代码（尤其是跨域请求时），且HttpOnly类型的Cookie完全无法通过JS/Dart访问。另外，package:http在Web端底层依赖浏览器的XMLHttpRequest，默认不开启凭证携带，也会导致无法获取或自动保存Cookie。

可行解决方案 #

1. 使用dart:html手动发起请求（可获取Set-Cookie） #

直接用浏览器原生的XMLHttpRequest，开启凭证携带后可尝试获取Set-Cookie（前提是Cookie非HttpOnly且服务器允许跨域凭证）：

import 'dart:html';
import 'dart:convert';

Future<void> fetchCatFactWithCookie() async {
  final xhr = HttpRequest();
  xhr.open('GET', 'https://catfact.ninja/fact');
  xhr.withCredentials = true; // 必须开启，允许携带跨域凭证
  xhr.onLoad.listen((_) {
    if (xhr.status == 200) {
      // 获取Set-Cookie响应头
      final setCookie = xhr.getResponseHeader('Set-Cookie');
      print('Set-Cookie: $setCookie');
      // 解析返回的数据
      final factData = jsonDecode(xhr.responseText!);
      print('Cat Fact: ${factData['fact']}');
    }
  });
  xhr.send();
}

2. 利用浏览器自动管理Cookie（无需手动获取） #

如果你的需求只是后续请求自动携带Cookie，不需要手动读取Set-Cookie，只需确保请求开启withCredentials，浏览器会自动保存符合条件的Cookie，后续同域/允许跨域的请求会自动带上：

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

Future<void> fetchCatFactAndReuseCookie() async {
  final client = http.BrowserClient();
  client.withCredentials = true; // 开启凭证携带

  // 第一次请求，浏览器自动保存Cookie
  final firstResponse = await client.get(Uri.parse('https://catfact.ninja/fact'));
  if (firstResponse.statusCode == 200) {
    print('First Fact: ${jsonDecode(firstResponse.body)['fact']}');
  }

  // 第二次请求，自动携带之前保存的Cookie
  final secondResponse = await client.get(Uri.parse('https://catfact.ninja/fact'));
  if (secondResponse.statusCode == 200) {
    print('Second Fact: ${jsonDecode(secondResponse.body)['fact']}');
  }

  client.close();
}

3. Android Studio开发环境跨域配置 #

如果是跨域请求出现问题，可临时关闭Chrome的同源策略（仅开发环境使用，生产环境禁止）：

• 打开Android Studio的Run/Debug Configurations
• 找到对应的Flutter运行配置，在Additional run args中添加：

  --web-browser-flag "--disable-web-security"
  

• 启动项目后，Chrome会以关闭同源策略的模式运行，允许跨域请求携带凭证。

关键注意事项 #

• CORS配置要求：跨域请求时，目标服务器必须返回Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为*，必须是你的Flutter Web运行地址（如http://localhost:5000）。
• HttpOnly Cookie限制：如果响应的Set-Cookie带有HttpOnly属性，无论用哪种方法都无法通过前端代码读取，这是浏览器的安全机制，只能由浏览器自动在请求中携带。

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