Flask接口返回的Set-Cookie无法在Angular前端浏览器中写入如何解决

1. 前端请求未开启凭证携带配置 #

跨域场景下，浏览器默认会忽略响应头的Set-Cookie字段，也不会主动携带Cookie，需要在Angular的请求配置中显式开启withCredentials：

return this.httpClient.post<any>(apiUrl + APIRoutes.GenerateOTP, data,
  { observe: 'response', withCredentials: true }).pipe(map(response => {
      console.log(response.headers.keys());
      return response.body;
    }))

2. 后端CORS配置缺失必填项 #

当前Flask代码只配置了允许的请求头，还需要补充两个关键CORS配置：

• 必须显式指定Access-Control-Allow-Origin为你的前端域名，不能用通配符*
• 必须添加Access-Control-Allow-Credentials: true响应头，告知浏览器允许跨域场景下操作Cookie

如果你用了flask-cors扩展，可以统一配置：

from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True, origins=["http://你的前端域名:端口"])

如果是手动加响应头，补充以下代码：

response.headers.add('Access-Control-Allow-Origin', 'http://你的前端域名:端口')
response.headers.add('Access-Control-Allow-Credentials', 'true')

3. Cookie属性配置适配问题 #

如果你的前后端部署在不同一级域名下，需要额外调整Cookie属性：

• 显式指定domain参数为你的一级域名，比如.example.com，保证前后端子域名都能读写Cookie
• 如果部署环境是HTTPS，建议给Cookie添加secure=True属性，避免浏览器拦截非安全上下文的Cookie写入
• 注意如果设置SameSite=None，必须同时搭配secure=True使用，否则浏览器会直接拒绝存储Cookie

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