I am using the latest, WP-API and the recommended Basic Auth, to test adding a post to WP from remote.

I have Access Headers opened up on the WP side:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Authorization, Content-Type");

When I submit a Get request to: the call easily authenticates and returns the Hello World Post.

When I submit a Post request to the same url. I get an error. Here is my jquery ajax call:

$('#test-post').submit(function(e){
    e.preventDefault();

    var title = $( '#title' ).val();
    var content = $( '#content_raw' ).val();

    var postData = {
        title: title,
        content: content
    }

    console.log(postData);

    $.ajax({
        method: 'POST',
        contentType: 'application/json',
        data: postData,
        url: sandboxUrl,
        beforeSend: function( xhr ) {
           xhr.setRequestHeader ('Authorization', 'Basic '+ btoa( 'apiuser' + ':' + 'PASSWORD' ));
        },
        success: function(data){
            console.log(data);
            alert('Your comment was successfully added');
        },
        error: function(data){
            console.log(data);
            alert('There was an error adding your comment');
        }
    });

    return false;
});

The response is Failed to load resource: the server responded with a status of 403 (Forbidden)

Array[0]responseText: "[{"code":"rest_forbidden","message":"You don't have permission to do this.","data":{"status":403}}]"

If run this block of code, removing unnecessary extras the query works and returns the Hello World post.

 $('#test-post').submit(function(e){
    e.preventDefault();

    $.ajax({
        method: 'GET',
        url: sandboxUrl,
        beforeSend: function( xhr ) {
           xhr.setRequestHeader ('Authorization', 'Basic '+ btoa( 'apiuser' + ':' + 'PASSWORD' ));
        },
        success: function(data){
            console.log(data);
            alert('Your comment was successfully added');
        },
        error: function(data){
            console.log(data);
            alert('There was an error adding your comment');
        }
    });

    return false;
});

How can I solve this?

I am using the latest, WP-API and the recommended Basic Auth, to test adding a post to WP from remote.

I have Access Headers opened up on the WP side:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Authorization, Content-Type");

When I submit a Get request to: http://sandbox.ravennainteractive/wp-json/wp/v2/posts the call easily authenticates and returns the Hello World Post.

When I submit a Post request to the same url. I get an error. Here is my jquery ajax call:

$('#test-post').submit(function(e){
    e.preventDefault();

    var title = $( '#title' ).val();
    var content = $( '#content_raw' ).val();

    var postData = {
        title: title,
        content: content
    }

    console.log(postData);

    $.ajax({
        method: 'POST',
        contentType: 'application/json',
        data: postData,
        url: sandboxUrl,
        beforeSend: function( xhr ) {
           xhr.setRequestHeader ('Authorization', 'Basic '+ btoa( 'apiuser' + ':' + 'PASSWORD' ));
        },
        success: function(data){
            console.log(data);
            alert('Your comment was successfully added');
        },
        error: function(data){
            console.log(data);
            alert('There was an error adding your comment');
        }
    });

    return false;
});

The response is Failed to load resource: the server responded with a status of 403 (Forbidden)

Array[0]responseText: "[{"code":"rest_forbidden","message":"You don't have permission to do this.","data":{"status":403}}]"

If run this block of code, removing unnecessary extras the query works and returns the Hello World post.

 $('#test-post').submit(function(e){
    e.preventDefault();

    $.ajax({
        method: 'GET',
        url: sandboxUrl,
        beforeSend: function( xhr ) {
           xhr.setRequestHeader ('Authorization', 'Basic '+ btoa( 'apiuser' + ':' + 'PASSWORD' ));
        },
        success: function(data){
            console.log(data);
            alert('Your comment was successfully added');
        },
        error: function(data){
            console.log(data);
            alert('There was an error adding your comment');
        }
    });

    return false;
});

How can I solve this?

• ajax
• authentication
• wp-api

• 1 Have you tried contentType: 'application/json'? – fuxia ♦ Commented Oct 23, 2015 at 21:57
• contentType can be application/json, as toscho said, or application/x-www-form-urlencoded. Both should work but json is not a valid contentType value. – cybmeta Commented Oct 24, 2015 at 5:11
• Thanks for the comments, neither of those contentTypes solved the issue but thanks for helping steer me clear of other issues. I'll update the OP. – TJ Sherrill Commented Oct 24, 2015 at 14:33
• Have you tried Postman or Rest Client to narrow down the issue? Make sure the browser running it is not logged into your WordPress site (use incognito or similar). PS - how are you sending params using the sandbox url for the get function? – brianlmerritt Commented Oct 27, 2015 at 21:16
• I have the same experience in postman. POST fails but GET Works. I have made sure I am logged out but creating an "apiuser" so that there is never cross over. In the case of the GET, since I am just asking for posts, there are no params, just pinging the url with a GET. – TJ Sherrill Commented Oct 28, 2015 at 15:41

1 Answer 1

I've met the same issue.

...the recommended Basic Auth...

I found that the problem is in the Basic Auth plugin. WP-API guys recommend using their own plugin and this solution works for me.

1. Deactivate all activated basic auth plugins in your WordPress dashboard
2. On the machine your WordPress is running go to the plugin folder

3. Run

   git clone https://github/WP-API/Basic-Auth.git

4. Go to your WordPress admin dashboard, plugins page. JSON Basic Authentication should be in the list. Activate it.

Now creating a record via POST request should work.