wp-json-API在后期编辑时返回401，带有React和nonce

我试图用React在WordPress中创建一个管理员页面，允许用户管理帖子内容。我已经成功地在react中创建了一个delete方法来使用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>

但是，我的update方法使用与delete相同的nonce键，返回401 unauthorized。我不确定使用相同的键是否是正确的方法，但是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很容易地实现了这一点。对我来说没什么大不了的，因为我只是想学着反应。仍然很好奇是否有人能告诉我为什么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" );
          });
  }

---

嘿，所以我在做这项工作时也遇到了同样的问题，但是经过一天的故障排除之后，这个问题的解决实际上相当简单，很容易被忽略

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函数的第三个参数。如果没有任何要作为第二个参数传递的数据，也可以使用抛出空字符串“”

我没有意识到参数位置很重要，但在Axios文档中，原型是

Axios.put（url[，data[，config]]）

。当我们意识到我们将header对象放入请求体而不是实际放入header时，我与一位朋友一起弄明白了这一点

希望这有帮助

你必须

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

在发送请求之前。最佳实践是在构造函数中设置它

在发送对象之前，请始终记住使用qs序列化对象

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