Question

我正在尝试使用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不能使用完全相同的标题＆amp;发布数据。我目前的解决方案：

  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" );
          });
  }

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

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

希望这有帮助！

Answer 2

您必须

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

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

并且始终记得在发送对象之前使用qs序列化对象。

wp-json API使用React和nonce

2 个答案: