WP REST API create post authentication issue

Question

I am getting a 401 or 403 error when trying to create a post from front end. I am using angular in the front end and I want to use basic authorization. I have enqueued the api and created the nonce:

wp_localize_script( 'angular-core', 'RestAPI', array( 'url' => get_bloginfo('wpurl').'/wp-json/wp/v2/', 'nonce' => wp_create_nonce( 'wp_rest' ) ) );

I then have this form in html:

<form ng-submit="processForm()">
        <!-- Title -->
        <div id="title_field" class="">
          <label>Title</label>
          <input type="text" name="title" class="" placeholder="Name of item" ng-model="formData.title">

        </div>

        <!-- Submit Button -->
        <button type="submit" class="">
          <span class=""></span> Submit!
        </button>

      </form>

And this is the processForm function in my controller:

$scope.formData = {}; //stores input from form above
$scope.processForm = function() {
        console.log(RestAPI.nonce);

        $http({
            method: 'POST',
            url: '/wp-json/wp/v2/posts',
            params: $scope.formData,
            transformRequest: angular.identity,
            headers: { 'Content-Type': 'multipart/form-data', 'X-WP-Nonce': RestAPI.nonce }
        })
        .success(function (result) {
            console.log('Success!');
        }).error(function () {
            console.log('Fail!');
        });
    };

Adding the X-WP-Nonce part to the headers is what gets me from 401 to a 403 error, and then it just tells me the nonce is invalid. If it matters, while logged into the admin panel, if i go to the site and try and access users/me (which i know has issues listed in the documentation) I simply get logged out and repeatedly asked to login. Maybe i am misunderstanding the nonce usage?

Any help is appreciated!

Answer 1

This is an old question, but the current REST API indicates that the X-WP-NONCE header should be set via the beforeSend callback. The following is directly from the REST API docs.

.ajax( {
    url: wpApiSettings.root + 'wp/v2/posts/1',
    method: 'POST',

    beforeSend: function ( xhr ) {
        xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
    },

    data:{
        'title' : 'Hello Moon'
    }
} ).done( function ( response ) {
    console.log( response );
} );

You can drop the headers property by doing the above, and using the contentType property. That is, if you use the $.ajax function.

$scope.formData = {}; //stores input from form above
$scope.processForm = function() {
        console.log(RestAPI.nonce);

    // using $.ajax not $http
    $.ajax({
        method: 'POST',
        url: '/wp-json/wp/v2/posts',
        data: $scope.formData,
        transformRequest: angular.identity,
        contentType: 'multipart/form-data',
        beforeSend: function( xhr ) {
            xhr.setRequestHeader( 'X-WP-Nonce', RestAPI.nonce );
        },
        success: function (result) {
            console.log('Success!');
        },
        error: function () {
            console.log('Fail!');
        }
    });
};