Angular客户端无法在请求中携带HTTPOnly Cookie至PHP服务器

问题背景 #

客户端部署在localhost:4200，PHP服务器运行在80端口。已在index.php配置跨域响应头：

header('Access-Control-Allow-Origin: http://localhost:4200');
header('Access-Control-Allow-Methods: *');
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Credentials: true");

登录时通过PHP设置含accessToken的HTTPOnly Cookie，代码如下：

$cookie_options = [
    'expires' => time() + 3600,
    'path' => '/',
    'secure' => false,
    'httponly' => true,
    'sameSite' => 'Lax'
];
$cookieSet = setcookie('accessToken', $accessToken, $cookie_options);
// ...后续返回登录成功信息

登录请求的响应头Set-Cookie中能看到该Cookie，但浏览器Application面板无记录。使用Angular上传文件方法（已设置withCredentials: true）：

uploadFiles(file: File, request: string): Observable<any> {
const uploadData = new FormData();
const url = `${API_URL}${request}`;
uploadData.append('userFile', file, file.name);
return this.http.post(url, uploadData, {
  observe: 'events',
  withCredentials: true
});
}

发起请求后，服务器通过isset($_COOKIE['accessToken'])检测不到Cookie，返回"no cookie"。需解决两个问题：

1. 如何让Angular自动携带该HTTPOnly Cookie；
2. 为何Cookie未在Application面板显示。

补充：使用Chrome浏览器，已开启第三方Cookie。

问题分析与解决方案 #

问题2：Cookie未在Application面板显示的原因及修复 #

浏览器未存储Cookie，核心原因是Cookie配置或跨域响应不符合规则：

• 域名不匹配：若服务器和客户端混用localhost与127.0.0.1访问，会导致Cookie域名不匹配。需确保两者使用同一域名，并在Cookie配置中显式指定domain参数：

  $cookie_options = [
      'expires' => time() + 3600,
      'path' => '/',
      'secure' => false,
      'httponly' => true,
      'sameSite' => 'Lax',
      'domain' => 'localhost' // 新增，匹配客户端访问域名
  ];
  

• 登录请求未携带withCredentials：跨域请求中，若登录请求未设置withCredentials: true，浏览器会忽略响应头中的Set-Cookie，导致Cookie无法存储。需在Angular的登录请求中添加该配置：

  login(credentials: any): Observable<any> {
    return this.http.post(`${API_URL}/login`, credentials, {
      withCredentials: true
    });
  }
  

• OPTIONS预检请求响应不规范：跨域POST请求会先发OPTIONS预检请求，需确保服务器对OPTIONS请求也返回正确的跨域头（包括Access-Control-Allow-Credentials: true），否则浏览器会拒绝后续操作。

问题1：让Angular自动携带HTTPOnly Cookie的修复 #

Angular端已设置withCredentials: true，这是正确的配置，但需满足两个前提：

1. Cookie已被浏览器成功存储（解决问题2后即可实现）；
2. 所有需要携带Cookie的跨域请求，都必须设置withCredentials: true（当前上传文件的代码已满足）。

HTTPOnly Cookie无法通过JS操作，只要浏览器存储了该Cookie，且请求符合跨域规则，浏览器会自动在请求头中携带Cookie，无需额外代码处理。

验证步骤 #

1. 登录请求完成后，查看Chrome Application面板的Cookie列表，确认accessToken存在；
2. 发起上传请求，在Network面板查看请求头，确认Cookie字段包含accessToken；
3. 服务器端通过$_COOKIE['accessToken']即可获取到对应值。

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