title: wp-json API returns 401 on post edit with React and nonce
body: <p>I am trying to create an admin page in WordPress with React that allows users to manage post content. I have successfully created a delete method in react to work with the API, but I'm having difficulties getting update to work.</p>
  
  <pre><code>// plugin_file.php
  add_action('admin_enqueue_scripts', function() {
      wp_localize_script('tfw-js', 'wpApiSettings', [
          'root' =&gt; esc_url_raw( rest_url() ),
           'nonce' =&gt; wp_create_nonce( 'wp_rest' )
      ]);
  });
  </code></pre>
  
  <p>The code above dumps this object near the bottom of my page</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  /* &lt;![CDATA[ */
  var wpApiSettings = {"root":"http:website.com\/wp-
  json\/","nonce":"9eb4c99f2c"};
  /* ]]&gt; */
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the delete method that works as intended</p>
  
  <pre><code>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();
  
              })
    }
  </code></pre>
  
  <p>However my update method, that uses the same nonce key as delete returns 401 unauthorized. I am unsure if the using the same key is the correct approach, but admin-ajax.php uses the same nonce key so I am guessing it is.</p>
  
  <pre><code>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></pre>
  
  <p>Error that is returned</p>
  
  <pre><code>{"code":"rest_cannot_edit","message":"Sorry, you are not allowed to edit this post.","data":{"status":401}}
  </code></pre>
  
  <p>I would prefer not to use an additional plugin to manage this.</p>
  
  <p>Thanks!</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I got this to work easily using jQuery. Not that big of a deal for me as I am just trying to learn React. Still curious if anyone can fill me in on why axios does not work with the exact same headers &amp; post data. My current solution:</p>
  
  <pre><code>  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" );
            });
    }
  </code></pre>