Angular 5调用WordPress REST API删除文章时请求头配置异常

嘿，我看你在Angular里调用WordPress REST API删除文章时碰到了请求头的问题，这就帮你梳理几个关键的修复点：

1. 替换旧版Headers为HttpHeaders #

Angular 4.3+之后的HttpClient模块已经弃用了旧的Headers类，改用HttpHeaders来构造请求头，这很可能是你请求头不生效的核心原因之一。我帮你调整代码：

修改后的project-list.component.ts #

deleteProject(project) { 
  // 用HttpHeaders替代旧Headers，同时添加上WordPress需要的Content-Type头
  const headers = new HttpHeaders({ 
    'Authorization': 'Bearer ' + this.token,
    'Content-Type': 'application/json'
  }); 
  this.projectsService.deleteProject(project.id, { headers }).subscribe( 
    result => console.log('文章删除成功:', result), 
    err => console.error('删除失败详情:', err) 
  ); 
}

修改后的projects.service.ts #

// 先导入HttpHeaders
import { HttpHeaders } from '@angular/common/http';

deleteProject(id: number, options: { headers: HttpHeaders }): Observable<Project[]> { 
  // 确保请求URL指向正确的WordPress文章端点，替换成你的站点域名
  const deleteUrl = `https://你的WordPress域名/wp-json/wp/v2/posts/${id}`;
  return this.http.delete<Project[]>(deleteUrl, options);
}

2. 验证Bearer令牌的权限 #

要确认你的JWT令牌对应的WordPress用户拥有delete_posts权限——WordPress REST API会严格检查这一点。你可以先向/wp-json/wp/v2/users/me发送GET请求，查看返回的用户权限字段里是否包含delete_posts。

3. 可选：添加强制删除参数 #

如果需要直接删除文章而不是移到回收站，可以在请求URL里加上force=true参数：

const deleteUrl = `https://你的WordPress域名/wp-json/wp/v2/posts/${id}?force=true`;

4. 排查跨域问题（跨域场景下） #

如果你的Angular项目和WordPress站点不在同一域名，得确保WordPress配置了CORS：

• 可以安装WordPress的CORS插件（比如Enable CORS）
• 或者在主题的functions.php里添加以下代码：

add_action('rest_api_init', function () {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function ($value) {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Authorization, Content-Type');
        return $value;
    });
});

如果还是不行，打开浏览器开发者工具的Network面板，查看DELETE请求的请求头是否正确发送，以及WordPress返回的具体错误码（比如401是令牌无效，403是权限不足），根据错误信息再针对性调整就好。

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