Ask your WordPress questions! Pay money and get answers fast! (more info)

Posting from one site to a WP Site using WP Rest API AJAX Request WordPress


I need to achieve this, From one site I need to create/edit/delete pages or post using the WP Rest API Plugin and oAuth, the plugin configuration it’s ready, I have the token, secret, key.

I've follow this tutorial

[[LINK href=""]][[/LINK]]

And installed WP Rest API plugin as well as the OAuth Authentication API for WordPress plugin and successfully generate my token.

So if I use Postman (HTTP Request) I can post into the Wordpress site using the endpoint 'wp-json/wp/v2/pages’ the problem that I’m facing is that I can't to do the same with Ajax.

The server response is 401 Unauthorized, but I have the authorized token it. I’m doing something wrong with the Headers.

This is the HTML code.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="">


<div class="jumbotron">
<div class="container">
<h2>Post page</h2>
<div class="container">
<form action="" method="post" id="ajaxPostForm">
<div class="form-group">
<label for="page_title">Page name</label>
<input type="text" class="form-control page_title" name="page_title" value="1">
<div class="form-group">
<label for="page_title">Page content</label>
<input type="text" class="form-control page_content" name="page_content" value="2">
<div class="form-group">
<label for="page_title">Page excerpt</label>
<input type="text" class="form-control page_excerpt" name="page_excerpt" value="3">
<button class="btn btn-primary">Send</button>

<script src=""></script>
<script src=""></script>
jQuery( document ).ready( function ( $ ) {
$('#ajaxPostForm').on( 'submit', function(e) {

var url = 'http://localhost/trabajos-en-proceso/wordpresstest/wp-json/wp/v2/pages';

var page_title = $('.page_title').val();
var page_excerpt = $('.page_excerpt').val();
var page_content = $('.page_content').val();
var status = 'draft';

var data = {
title: page_title,
excerpt: page_excerpt,
content: page_content

$.ajax( {
xhrFields: {
withCredentials: true
type: "POST",
url: url,
contentType: 'application/x-www-form-urlencoded',
headers: {
//'Authorization' : 'OAuth oauth_consumer_key="tpty4Ycr9fSh",oauth_token="80q3EOdxDUhdLfzS5Y36IYu0",oauth_signature_method="HMAC-SHA1",oauth_timestamp="1484331444",oauth_nonce="glqMGD",oauth_version="1.0",oauth_signature="VZdIlLUsS2QSJteI5%2BY%2BEDfxyac%3D"',
//'oauth_consumer_key' : 'JNIHZwTTpmX7',
//'oauth_consumer_secret' : 'WJbfnGArAAZfKz2IdD2QrdYpToyqAQxAsK4bs8KSGOp5itCU',
//'oauth_token': 'zAzmNdpYmLeTGdAYcrVFIAMu',
//'oauth_token_secret': 'dUMezdG4R9H7a7Hzvgw4M3nMiMg7vdyGptEHx7l5kgUxO80D'
/*"Access-Control-Allow-Headers": 'Origin',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '' // my domain where I make the ajax request.*/
"Authorization": "OAuth oauth_token=zAzmNdpYmLeTGdAYcrVFIAMu"
data: data,
crossDomain: true,
beforeSend: function( xhr ) {
xhr.setRequestHeader ('Authorization', 'Bearer zAzmNdpYmLeTGdAYcrVFIAMu');
success: function( data, xhr ) {
fail : function( response ) {
console.log( response );
alert( response );
cache: false


You can take a look on what I'm talking about.

Answers (0)

No answers yet.