Angular对接Flask接口时session cookie无法被浏览器保存如何解决

• 前端请求必须开启withCredentials配置
  Angular侧有两种配置方式，选其一即可：
  单请求配置：

  // 发请求时额外传入配置项
  this.http.get('http://api.localhost.local:5000/接口路径', { withCredentials: true }).subscribe()
  

  全局拦截器配置（适合所有请求都需要带凭证的场景）：

  @Injectable()
  export class CredentialsInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const clonedReq = req.clone({
        withCredentials: true
      });
      return next.handle(clonedReq);
    }
  }
  // 在对应module的providers中注册拦截器
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CredentialsInterceptor, multi: true }
  ]
  

• 后端Flask必须配置精确的允许源，禁止使用*通配符
  使用flask-cors的配置示例：

  from flask import Flask
  from flask_cors import CORS
  
  app = Flask(__name__)
  # origins必须写完整的前端地址，包含端口，不能用*
  CORS(app, origins=["http://dev.localhost.local:4200"], supports_credentials=True)
  

• 正确配置Session Cookie属性

  app.config['SECRET_KEY'] = '替换为你自己的密钥'
  app.config['SESSION_COOKIE_DOMAIN'] = '.localhost.local'
  # 本地HTTP访问时设为Lax即可，生产环境HTTPS跨站访问时设为None
  app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
  # 如果SAMESITE设为None，必须同时开启以下配置，要求所有请求走HTTPS
  # app.config['SESSION_COOKIE_SECURE'] = True
  app.config['SESSION_COOKIE_HTTPONLY'] = True
  app.config['SESSION_COOKIE_PATH'] = '/'
  

  注意：Chrome、Firefox等高版本浏览器要求，SameSite属性为None的Cookie必须同时携带Secure属性，否则会直接拒绝存储。
• 排查本地环境配置
  确认本地hosts文件中dev.localhost.local和api.localhost.local都已正确指向127.0.0.1，请求端口和实际服务启动端口一致。

配置完成后如果仍有问题，可以打开浏览器控制台的「网络」标签，查看请求响应头中Set-Cookie字段旁边的警告标识，浏览器会直接给出Cookie未被存储的具体原因，可根据提示针对性调整。

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