Angular 14中如何通过ngx-cookie-service获取正确的后端Session ID Cookie

先停止前端手动设置Cookie #

后端在登录接口响应中已经通过Set-Cookie头设置了Session ID相关Cookie，前端不需要再调用cookieService.set(...)手动创建Cookie，否则会导致前后端各生成一个Cookie，出现重复的情况。直接删除前端所有手动设置Cookie的代码。

确保跨域请求携带凭证（跨域场景必做） #

如果前端和后端是跨域部署，必须在HttpClient请求中开启凭证携带：

// 登录请求示例
this.http.post('/api/login', { username: 'xxx', password: 'xxx' }, {
  withCredentials: true // 关键配置，让浏览器保存并携带Cookie
}).subscribe(res => {
  // 登录成功后再尝试获取Cookie
  const sessionId = this.cookieService.get('SESSIONID'); // 替换成后端实际的Cookie名称
});

同时后端需要配置CORS：

• 开启Access-Control-Allow-Credentials: true
• Access-Control-Allow-Origin不能设置为*，必须指定前端的具体域名（比如http://localhost:4200）

正确获取后端Cookie #

• 登录请求成功后，直接调用cookieService.get('Cookie名称')获取，这里的名称要和后端Set-Cookie头里的名称完全一致。
• 注意：如果后端设置的Cookie是HttpOnly类型，前端无法通过ngx-cookie-service读取，这是浏览器的安全机制。这种情况下不需要强行获取，只要保证后续请求都带上withCredentials: true，浏览器会自动把HttpOnly Cookie发送给后端，Session就能正常维持。

排查重复Cookie的来源 #

打开浏览器开发者工具（F12），进入Application标签 -> Cookies，查看两个Cookie的以下属性：

• 域名（Domain）：判断哪个是前端域名下的，哪个是后端域名下的
• 路径（Path）：是否有路径差异
• 创建来源：通过请求记录看哪个Cookie是前端代码设置的，哪个是后端响应头设置的
  找到前端生成的重复Cookie，删除对应的设置代码即可。

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