wp-json API 在使用 React 和 nonce 进行后期编辑时返回 401

Posted 2023-02-22

【中文标题】wp-json API 在使用 React 和 nonce 进行后期编辑时返回 401

【英文标题】：wp-json API returns 401 on post edit with React and nonce

【发布时间】：2018-01-20 21:18:46

【问题描述】：

我正在尝试使用 React 在 WordPress 中创建一个管理页面，允许用户管理帖子内容。我已经成功地创建了一个删除方法来响应 API 的使用，但是我在更新工作时遇到了困难。

// plugin_file.php
add_action('admin_enqueue_scripts', function() 
    wp_localize_script('tfw-js', 'wpApiSettings', [
        'root' => esc_url_raw( rest_url() ),
         'nonce' => wp_create_nonce( 'wp_rest' )
    ]);
);

上面的代码将该对象转储到我的页面底部附近

<script type='text/javascript'>
/* <![CDATA[ */
var wpApiSettings = "root":"http:website.com\/wp-
json\/","nonce":"9eb4c99f2c";
/* ]]> */
</script>

这是按预期工作的删除方法

deletePost(post) 

    var _this = this;
    this.serverRequest =
          axios
            .delete(wpApiSettings.root + "wp/v2/posts/" + post.id, 
                headers: 'X-WP-Nonce': wpApiSettings.nonce,
            )
            .then(function(result) 
                _this.updatePostList();

            )
  

但是我的更新方法，它使用与删除相同的随机数键返回 401 未授权。我不确定使用相同的密钥是否是正确的方法，但 admin-ajax.php 使用相同的 nonce 密钥，所以我猜它是。

updatePost(post) 
    var _this = this;
    this.serverRequest =
      axios
        .put(wpApiSettings.root + "wp/v2/posts/" + post.id, 
            headers: 'X-WP-Nonce':wpApiSettings.nonce,
            data : 
                title: 'test'
            
        )
        .then(function(result) 
            _this.updatePostList();
        )

返回的错误

"code":"rest_cannot_edit","message":"Sorry, you are not allowed to edit this post.","data":"status":401

我不想使用额外的插件来管理这个。

谢谢！

更新：

我使用 jQuery 轻松完成了这项工作。对我来说没什么大不了的，因为我只是想学习 React。仍然很好奇是否有人可以向我解释为什么 axios 不能使用完全相同的标题和发布数据。我目前的解决方案：

  updatePost(post) 
    var _this = this;

    jQuery.ajax(
        type: "POST",
        url: wpApiSettings.root + "wp/v2/posts/" + post.id,
        data: 
            "title": 'test',
        ,
        beforeSend: function( xhr ) 
            xhr.setRequestHeader("X-WP-Nonce", wpApiSettings.nonce);
          
        ).done(function(response) 
            _this.updatePostList();
        )
        .fail(function() 
            alert( "error" );
          );
  

【参考方案1】：

嘿，所以我在完成这项工作时也遇到了同样的问题，但经过一整天的故障排除后，这个问题的修复实际上相当简单且容易被忽视。

axios.put(wpApiSettings.root + "wp/v2/posts/" + post.id,
     headers: 'X-WP-Nonce':wpApiSettings.nonce,
     title: 'test' )

应该是

axios.put(wpApiSettings.root + "wp/v2/posts/" + post.id,
     title: 'test' , 
     headers: 'X-WP-Nonce':wpApiSettings.nonce)

我不敢相信我错过了这个，但标题应该在一个对象中，该对象始终是 Axios 中 PUT 或 POST 函数的第三个参数。如果您没有任何要作为第二个参数传递的数据，您也可以使用 throw an empty string ''。

我没有意识到参数位置很重要，但是在 Axios 文档中，原型是 axios.put(url[, data[, config]])。当我们意识到我们将标头对象放入请求正文中而不是实际将其放入标头时，我和朋友一起弄清楚了。

希望这会有所帮助！

【参考方案2】：

你必须

axios.defaults.headers.common['X-WP-Nonce'] = wpApiSettings.nonce; 

在发送请求之前。最佳做法是将其设置在您的构造函数中。

并且永远记得在发送之前使用 qs 序列化您的对象。