Angular16/Ionic7中ngx-cookie-service无法随请求发送Cookie问题

核心原因：URL拼接导致域名/跨域不匹配 #

你遇到的问题本质是请求克隆时的URL拼接改变了请求目标域名，触发Cookie的域名绑定规则，浏览器拒绝自动携带Cookie。

具体逻辑： #

• Cookie是严格绑定域名的：通过ngx-cookie-service设置的Cookie，默认会绑定当前前端页面的域名（比如你的Ionic应用运行在localhost:8100）。
• 当你用req.clone({url: this.apiBaseUrl + req.url})拼接URL后，请求目标变成了API服务器的域名（比如localhost:3000），和Cookie绑定的域名不一致。
• 即便设置了withCredentials: true，浏览器只会在同域名或已配置合法跨域规则的场景下，才会自动携带Cookie。而你不使用clone时，URL错误但域名和Cookie匹配，所以Cookie能正常发送。

解决步骤 #

1. 统一Cookie的域名配置：
   设置Cookie时指定和API服务器匹配的域名（若为本地开发，可设为localhost；生产环境设为共同父域名）：

   this.cookieService.set('sessionkey', 'a-unique-hash', null, '/', 'localhost', false, 'Lax');
   

   例：若前端域名是app.example.com，API域名是api.example.com，则Cookie的domain设为example.com。

2. 配置API服务器的跨域规则：
   若为跨域请求，服务器必须返回以下响应头：

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

3. 优化请求克隆逻辑：
   避免手动拼接URL导致域名混淆，建议在Angular的HttpClient配置中直接设置baseUrl：

   // 在模块providers中配置
   providers: [
     {
       provide: HTTP_INTERCEPTORS,
       useClass: YourInterceptor,
       multi: true
     },
     {
       provide: BASE_URL,
       useValue: 'https://your-api-domain.com/'
     }
   ]
   

验证方法 #

• 打开浏览器开发者工具「应用」标签，查看Cookie的Domain字段，确认与请求目标域名匹配。
• 在「网络」标签中检查请求的Origin头，以及响应的Access-Control-*头是否符合跨域携带Cookie的要求。

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