Angular 5 HttpClient忽略WordPress REST API响应中的Set-Cookie头问题

我之前也碰到过类似的跨域Cookie处理问题，结合你的XAMPP+WordPress 4.9+Angular 5环境，给你几个针对性的解决方案：

1. 给Angular HttpClient请求添加withCredentials配置 #

浏览器在跨域请求时，默认不会自动携带或存储Cookie，必须显式开启withCredentials选项才能让Cookie正常交互：

单个请求配置 #

在你的POST请求中直接添加该选项：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

// 示例POST请求调用WordPress API
submitRequest() {
  const apiUrl = 'http://localhost/~XXXX/wordpress/wp-json/your-api-endpoint';
  const postData = { /* 你的请求数据 */ };
  
  this.http.post(apiUrl, postData, { withCredentials: true })
    .subscribe(response => {
      // 处理响应逻辑
    }, error => {
      // 错误处理
    });
}

全局配置（通过拦截器） #

如果所有请求都需要携带Cookie，可以创建一个HTTP拦截器来全局设置，避免重复代码：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class CredentialsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 克隆请求并添加withCredentials配置
    const clonedRequest = req.clone({ withCredentials: true });
    return next.handle(clonedRequest);
  }
}

然后在app.module.ts的providers中注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CredentialsInterceptor } from './credentials.interceptor';

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CredentialsInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

2. 配置WordPress的CORS响应头 #

你的Angular应用和WordPress属于跨域环境（即使都是localhost，路径/端口不同也算跨域），必须让WordPress返回正确的CORS头来允许凭证携带：

在WordPress主题的functions.php文件中添加以下代码：

add_action('rest_api_init', function() {
  // 指定你的Angular应用地址，比如默认的http://localhost:4200
  $allowed_origin = 'http://localhost:4200';
  header("Access-Control-Allow-Origin: $allowed_origin");
  // 允许携带Cookie等凭证
  header("Access-Control-Allow-Credentials: true");
  // 允许的请求方法
  header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
  // 允许的请求头类型
  header("Access-Control-Allow-Headers: Content-Type");
  
  // 处理OPTIONS预检请求，直接返回200状态
  if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    status_header(200);
    exit();
  }
});

注意：Access-Control-Allow-Origin不能设为*，必须指定具体的Angular应用地址，否则Access-Control-Allow-Credentials不会生效。

3. 调整WordPress的Cookie配置 #

确保WordPress生成的Cookie属性符合跨域场景要求：

在WordPress的wp-config.php文件中添加或修改以下常量：

// 设置Cookie的域名，本地环境设为localhost
define('COOKIE_DOMAIN', 'localhost');
// 设置Cookie的路径，匹配你的WordPress安装路径
define('COOKIEPATH', '/~XXXX/wordpress/');
// 设置SameSite属性，本地跨域场景用Lax即可（如果是HTTPS跨域可以用None）
define('COOKIE_SAMESITE', 'Lax');

4. 验证Cookie处理是否生效 #

做完以上配置后，通过浏览器开发者工具确认效果：

• 打开Network标签，查看POST请求的响应头，确认Set-Cookie存在，且Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin配置正确。
• 切换到Application标签，在Cookies下找到localhost，查看是否有WordPress生成的Cookie。
• 后续请求的请求头中，确认Cookie字段已携带对应的Cookie值。

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