WordPress前端AJAX删除文章请求返回403/401错误求助

问题描述 #

开发前端文章删除功能时遇到权限报错，初始实现代码如下：

jQuery(document).ready(function() {
    jQuery('.delete-listing-btn').on('click', function() {
        jQuery.ajax({
            beforeSend: (xhr) => {
                xhr.setRequestHeader('X-WP-Nonce', favorites_data.nonce);
        },
            url: 'https://www.mallorca-select.com/wp-json/wp/v2/properties-for-sale/2303',
            type: 'DELETE',
            success: (response) =>{
                console.log("COngratus");
                console.log(response);
            },
            error: (response) => {
                console.log("Fail");
                console.log(response);
            }
        });
    });
});

测试时的报错规律：

• 不携带nonce参数发起请求，接口返回401未授权错误
• 携带nonce参数发起请求，接口返回403禁止访问错误

相关报错截图：

故障原因与修复方案 #

按优先级逐一排查以下问题即可解决：

• Nonce生成规则不匹配
  WordPress REST API 校验的X-WP-Nonce必须以wp_rest为动作生成，你当前调用的favorites_data.nonce如果是为收藏等其他功能生成的nonce，无法通过REST API的权限校验。
  需要在PHP端按规则生成nonce并本地化到前端，参考代码：

  // 放入主题functions.php或对应功能插件文件
  function register_delete_assets() {
      wp_enqueue_script( 'custom-delete', get_stylesheet_directory_uri() . '/js/delete.js', ['jquery'], '1.0', true );
      // 注意wp_create_nonce的参数必须固定为'wp_rest'
      wp_localize_script( 'custom-delete', 'favorites_data', [
          'nonce' => wp_create_nonce( 'wp_rest' )
      ]);
  }
  add_action( 'wp_enqueue_scripts', 'register_delete_assets' );
  

• JS代码语法错误
  你贴出的代码中beforeSend回调的大括号没有正确闭合，和后续参数层级错乱，会导致请求头设置不生效。另外建议接口地址用相对路径避免跨域问题，修正后的JS代码如下：

  jQuery(document).ready(function() {
      jQuery('.delete-listing-btn').on('click', function() {
          jQuery.ajax({
              beforeSend: (xhr) => {
                  xhr.setRequestHeader('X-WP-Nonce', favorites_data.nonce);
              }, // 补全回调闭合
              url: '/wp-json/wp/v2/properties-for-sale/2303', // 替换为相对路径
              type: 'DELETE',
              success: (response) =>{
                  console.log("删除成功", response);
              },
              error: (response) => {
                  console.log("删除失败", response);
              }
          });
      });
  });
  

• 当前用户权限不足
  WordPress REST API 删除文章默认要求当前登录用户拥有对应文章类型的删除权限：如果要删除的是他人发布的房源，需要delete_others_posts权限；删除自己发布的房源需要delete_posts权限。普通订阅者角色默认没有上述权限，哪怕nonce正确也会返回403。可以在控制台查看当前登录用户的角色和权限配置，给需要操作的用户分配对应角色即可。
• 自定义文章类型REST配置错误
  如果你是自行注册的properties-for-sale自定义文章类型，需要确认注册时show_in_rest参数设为true，同时REST接口的权限回调没有拦截合法的删除请求，不要将DELETE请求的权限回调设为强制返回false。

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