Flutter Web登录成功后调用所有API均返回401问题求助

问题拆解 #

你遇到的核心问题是跨域场景下Cookie无法自动传递，加上浏览器安全限制导致手动设置Cookie失败：

• 浏览器出于安全策略禁止JS代码手动设置Cookie请求头，所以直接给headers加Cookie或者用document.cookie都会触发Refused to set unsafe header "cookie"报错
• 后端返回的Cookie未指定SameSite=None属性，跨域时被Chrome默认按SameSite=Lax规则拦截，导致登录后的请求没有携带会话凭证，最终返回401

具体解决步骤 #

1. 后端修改Set-Cookie响应头 #

必须给登录接口返回的Set-Cookie头添加以下属性，确保跨域下能被浏览器正常保存并自动传递：

Set-Cookie: JSESSIONID=你的会话ID; Path=/; SameSite=None; Secure; HttpOnly

• SameSite=None：明确允许跨域请求携带该Cookie
• Secure：和SameSite=None强制绑定，要求仅在HTTPS环境下传输Cookie（Chrome强制要求）
• HttpOnly：可选但推荐，防止前端JS读取Cookie，降低XSS攻击风险

2. Flutter Web请求开启凭证携带 #

修改你的http请求代码，添加withCredentials: true参数，让浏览器自动将保存的Cookie携带到请求中：

var response = await http.get(
  _getUri(url, queryParams: queryParams),
  headers: header,
  withCredentials: true, // 关键配置：允许请求携带凭证（Cookie）
);

POST请求同理，也需要添加该参数。

3. 后端配置正确的CORS规则 #

后端必须调整跨域资源共享（CORS）配置：

• 设置Access-Control-Allow-Credentials: true，允许跨域请求携带凭证
• Access-Control-Allow-Origin不能设为*，必须指定你的Flutter Web域名（比如https://your-web-app.com）
• 根据实际需求配置Access-Control-Allow-Headers，确保请求中用到的头信息被允许

为什么Postman能正常工作？ #

Postman不属于浏览器环境，不受同源策略和Cookie安全限制，所以手动添加Cookie头可以正常访问API，但浏览器必须严格遵循跨域安全规则，不能用同样的方式处理。

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