Posting from one site to a WP Site using WP Rest API AJAX Request WordPress
- REFUNDED
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="https://code.tutsplus.com/tutorials/wp-rest-api-setting-up-and-using-oauth-10a-authentication--cms-24797"]][[/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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<h2>Post page</h2>
</div>
</div>
<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>
<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>
<div class="form-group">
<label for="page_title">Page excerpt</label>
<input type="text" class="form-control page_excerpt" name="page_excerpt" value="3">
</div>
<button class="btn btn-primary">Send</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
jQuery( document ).ready( function ( $ ) {
$('#ajaxPostForm').on( 'submit', function(e) {
var url = 'http://localhost/trabajos-en-proceso/wordpresstest/wp-json/wp/v2/pages';
e.preventDefault();
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': 'http://demopress.xyz' // 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 ) {
alert(data);
},
fail : function( response ) {
console.log( response );
alert( response );
},
cache: false
});
});
});
You can take a look on what I'm talking about.
https://drive.google.com/open?id=0B5Q40Xaqyn6sX1VkdHh2OTlkbEU