I am having the same issue you originally had Goharika. 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.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 headers portion of the submit function got me from a 401 error to a 403 error, saying the nonce is invalid. I don’t know what the deal is.
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?
