6

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!

2

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!');
        }
    });
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.