Flutter Web发起HTTP请求响应未返回Set-Cookie Header问题求助

问题根本原因 #

• 该现象是浏览器的固有安全限制导致，和Flutter框架、HTTP库、接口返回逻辑无关：
  1. 运行在浏览器中的JavaScript（包括Flutter Web编译生成的JS代码），对跨域请求的响应头有严格的访问限制，Set-Cookie属于浏览器禁止前端代码直接读取的保留响应头，即使接口实际返回了该字段，浏览器也会自动将其从响应头中过滤，不会暴露给JS层。
  2. curl命令不受浏览器同源策略、CORS规则约束，所以可以直接读取到完整的响应头。
• 额外说明：浏览器收到合法的Set-Cookie后会自动存储管理对应Cookie，后续向同域/允许跨域带凭证的接口发请求时，浏览器会自动带上符合条件的Cookie，无需手动读取、添加到请求头。

对应解决方案 #

场景1：仅需要后续请求自动携带Cookie #

你只需要为HTTP请求开启withCredentials配置即可，该配置会告诉浏览器允许跨域请求携带/存储Cookie：

• 如果你使用Dio库：

// 全局配置、单次请求设置都可生效
dio.options.extra['withCredentials'] = true;

• 如果你使用系统默认http库，建议替换为适配Web的跨域请求库，或直接封装浏览器原生Fetch API启用credentials: 'include'参数。

注意：开启withCredentials时，后端Access-Control-Allow-Origin不能配置为*，必须指定明确的允许域名，否则浏览器依然会拦截请求。

场景2：必须由前端代码手动读取凭证内容 #

不要使用Set-Cookie传递需要前端读取的凭证，调整后端逻辑：

1. 将需要前端读取的凭证内容放到自定义响应头中，例如X-Custom-Token
2. 后端CORS配置新增Access-Control-Expose-Headers: X-Custom-Token，明确告知浏览器该自定义响应头允许前端JS读取
3. 前端即可通过response.headers['x-custom-token']正常读取到对应内容，按需存储到localStorage、sessionStorage等位置，后续请求手动携带即可。

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