How to create a new page in Confluence using jQuery and their REST API?

Question

I have been looking for a pure HTML and jQuery example of how to create a page in Confluence using their REST API. I found the following examples, but neither of them are working for me:

Example A

var username = "admin";
var password = "admin";
var jsondata = {"type":"page",
"title":"My Test Page",
"space":{"key":"TST"},
"body":{"storage":{"value":"<p>This is a new page</p>","representation":"storage"}}};

$.ajax
  ({
    type: "POST",
    url: "http://localhost:8080/confluence/rest/api/content/",
    contentType:"application/json; charset=utf-8",
    dataType: "json",
    async: false,
    headers: {
        "Authorization": "Basic " + btoa(username+ ":" + password)
    },
    data: JSON.stringify(jsondata),
    success: function (){
        console.log('Page saved!');
    },
    error : function(xhr, errorText){
        console.log('Error '+ xhr.responseText);
    }
});

Example B

var jsondata = {"type":"page",
"title":"My Test Page",
"space":{"key":"TEST"},
"body":{"storage":{"value":"<p>This is a new page</p>","representation":"storage"}}}

$.ajax
  ({
    type: "POST",
    url: "http://localhost:8080/confluence/rest/api/content/",
    contentType:"application/json; charset=utf-8",
    dataType: "json",
    async: false,
    beforeSend: function (xhr){
        xhr.setRequestHeader('Authorization', "Basic YWRtaW46YWRtaW4= " );
    },
    data: JSON.stringify(jsondata),
    success: function (){
        console.log('Page saved!');
    }
});

My Code

var data = {
      type: "page",
      title: "New Page",
      space: {
            key: "TST"
      },
      body: {
            storage: {
                  value: "<p>This is a new page</p>",
                  representation: "storage"
            }
      }
};

var link = 'http://confluence.mysite.com:80/rest/api/content/';

$.ajax({
      url: link,
      type: "POST",
      dataType: "json",
      crossDomain: true,
      username: user.username,
      password: user.password,
      data: JSON.stringify(data),
      contentType: "application/json",
      success: function (result) {
            alert('Data saved!');
      },
      error: function (xhr, status, error) {
            alert('Status: ' + status + '\n' +
                   'Error: ' + error);
      }
});

I tried the following solution (above), but it seems I am having trouble authenticating against Confluence. I checked the permissions, and I am a member of Confluence's administrative group. The GET command appears to work, however with the POST, I keep getting:

({"statusCode":403,"message":"You're not allowed to view that space, or it does not exist."})

I have found similar questions posted, yet none of them have a working solution. Most of the resources appear to be written for python.

Is there another API solution which would prove to be better? I am open to suggestions.

score 5 · Accepted Answer · answered Jan 21 '15 at 01:41

Thanks again @mansilladev. With your help, I was able to find the solution. Instead of using the following methods:

beforeSend: function (xhr){
    xhr.setRequestHeader('Authorization', "Basic YWRtaW46YWRtaW4= " );
}

or

headers: {
    "Authorization": "Basic " + btoa(username + ":" + password)
}

Using the xhrFields option, with username & password, appears to execute a successful request.

My Solution

$.ajax({
    url: link,
    type: "POST",
    dataType: "json",
    crossDomain: true,
    username: user.username,
    password: user.password,
    data: JSON.stringify(data),
    contentType: "application/json",
    xhrFields: {
            "withCredentials": true
    },
    success: function (result) {
            alert('Data saved!');
    },
    error: function (xhr, status, error) {
            alert(status + ' | ' + error);
    }
});

How to create a new page in Confluence using jQuery and their REST API?

1 Answers1