WordPress插件AJAX请求REST API时用户身份验证问题如何解决

核心问题解答 #

你提到的通过浏览器Cookie完成身份验证的方案是完全可行的，这也是WordPress官方推荐的同域前端请求REST API的标准认证方式。你当前请求报错的原因是没有按WordPress REST API的要求带上验证用的nonce头，导致即使有登录Cookie也会被判定为未授权。

方案1：Cookie认证（即你询问的基于浏览器Cookie的实现方式） #

无需手动读取Cookie，按WordPress规范补充请求参数即可，仅适用于同域下、访问用户已在当前浏览器登录WordPress账号的场景：

1. 修改短代码逻辑，生成REST API专用的验证nonce并传递到前端：

function wp_favoritar_posts_init() {
       $post_id = 6;
       // 生成REST API专属nonce，同时输出全局JS变量传递给前端
       wp_localize_script( 'jquery', 'wpRestConfig', array(
           'rest_url' => esc_url_raw( rest_url() ),
           'nonce' => wp_create_nonce( 'wp_rest' )
       ) );
       
       echo "<div class='redimensionar'>";
       echo "<a id='teste' href='?wpfpaction=add&amp;postid=". $post_id ."' title='teste' rel='nofollow'>Favorito</a>";
       echo "</div>";
       echo "<script>calculate()</script>";
   }

   add_shortcode('favorito', 'wp_favoritar_posts_init');

2. 修改AJAX请求，补充验证头，自动携带Cookie：

function calculate(){
       var URL = "http://localhost/wordpress/wp-json/wp/v2/posts";
       
       $.ajax({
           type: "GET",
           dataType: "JSON",
           url: URL,
           // 补充REST API验证头
           beforeSend: function (xhr) {
               xhr.setRequestHeader('X-WP-Nonce', wpRestConfig.nonce);
           },
           // 开启自动携带同域Cookie
           xhrFields: {
               withCredentials: true
           },
           success: function(data){
               alert('oi');
           },
           error: function (request, status, error) {
               alert(request.responseText);
           }
       });
   }

方案2：应用密码认证（适用于跨域、外部系统调用场景） #

如果需要给跨域请求或者未登录用户的调用使用，可以给指定账号生成专用应用密码做身份验证：

1. 进入WordPress后台→用户→个人资料，找到「应用密码」模块，生成专属应用密码
2. 在AJAX请求中补充基础认证头：

beforeSend: function (xhr) {
    // 用户名是WordPress登录账号，密码是刚生成的应用密码，需做base64编码
    xhr.setRequestHeader('Authorization', 'Basic ' + btoa('你的登录账号:生成的应用密码'));
}

注意：该方案不要在公开可访问的前端页面使用，会泄露账号权限，仅适合内部管理类页面使用

方案3：放开指定接口的访问权限（适合无需登录即可访问的场景） #

如果获取文章的接口本身不需要登录就能访问，可以修改权限拦截逻辑，单独放开该接口的权限：

add_filter( 'rest_authentication_errors', 'only_authorised_rest_access');

function only_authorised_rest_access( $result )
{
    // 单独放开文章查询接口的权限
    $current_route = $GLOBALS['wp']->query_vars['rest_route'] ?? '';
    if (strpos($current_route, '/wp/v2/posts') === 0) {
        return $result;
    }
    if( ! is_user_logged_in() ) {
        return new WP_Error( 'rest_unauthorised', __( 'Only authenticated users can access the REST API.', 'rest_unauthorised' ), array( 'status' => rest_authorization_required_code() ) );
    }

    return $result;
}

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