Angular自定义Cookie未随请求头发送？原因及解决办法咨询

我正在使用Angular框架及NGX Cookie Service包在前端创建自定义Cookie，希望该Cookie能随HTTP请求一同发送至后端。

以下是设置Cookie的代码：

private SetCookieAfterLogin() {
    let cookie = this.loginOutput.Token;
    this.cookieService.set('authCookie', cookie, { sameSite: 'Lax'});
}

调用API的HTTP方法代码：

getAllUsers(): Observable<any> {
    return this.httpClient.get<IGetUserModel[]>(this.getAllUsersUrl, {withCredentials:true}).
    pipe(
        tap(data => console.log('All:',JSON.stringify(data))),
        catchError(this.handleError)
    );
}

但查看HTTP请求头时发现Cookie并未被附带。请问这是正常现象吗？若正常，Cookie附带的规则是什么？是否需要使用HTTP拦截器？目前API与前端客户端均运行在localhost，但端口不同，这是否会影响Cookie的相关配置？

问题解答 #

1. 这种现象不正常 #

正常配置下，只要满足Cookie的发送规则，请求应该自动携带Cookie，当前情况说明配置存在问题。

2. Cookie附带的核心规则 #

浏览器是否自动携带Cookie到后端，核心看以下几点：

• 域名与端口匹配：Cookie默认绑定设置它的域名和端口，即使都是localhost，不同端口也会被视为不同源。前端在localhost:4200设置的Cookie，默认只会在4200端口的请求中携带，不会发送到其他端口的后端。
• SameSite属性：你设置的Lax属性，在跨站（含同域名不同端口）场景下，仅导航类请求（如链接跳转）会携带Cookie，AJAX/fetch这类异步请求不会自动携带。跨源场景需设置SameSite: 'None'，同时必须搭配secure: true（注意：secure要求请求为HTTPS，本地HTTP开发可通过浏览器调试选项强制视为安全源）。
• withCredentials配置：你已在请求中设置{withCredentials:true}，这是跨源请求携带Cookie的必要配置，后端也需对应开启Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin必须指定具体前端域名，不能用*。

3. 是否需要HTTP拦截器？ #

不需要。Cookie的自动携带是浏览器的原生行为，只要配置正确就会自动触发，HTTP拦截器适用于手动添加请求头的场景（如Token放在Authorization头），无需用于Cookie的自动携带。

4. 同localhost不同端口的影响 #

会直接影响。浏览器同源策略中，端口不同属于不同源，所以跨端口的请求不会自动携带前端设置的Cookie。解决方法：

• 设置Cookie时指定domain: 'localhost'和path: '/'（默认路径可能限制Cookie发送范围）。
• 配置SameSite: 'None'和secure: true，本地HTTP开发可在Chrome中开启chrome://flags/#unsafely-treat-insecure-origin-as-secure，添加前端地址强制视为安全源。
• 后端配置CORS：开启Access-Control-Allow-Credentials: true，Access-Control-Allow-Origin设为前端具体地址（如http://localhost:4200）。

内容的提问来源于stack exchange，提问作者Andrеw