How to call Rest API with JQUery with additional Headers

Question

I want to give a call to citrix Rest API for webinar registration.

Here is the URL for API:

https://api.citrixonline.com/G2W/rest/organizers/{organizerKey}/webinars/{webinarKey}/registrants

The request should be POST and it should have additional headers

"Accept", "application/json"
"Content-type", "application/json"
"Authorization", "OAuth oauth_token=ACCESSTOKEN"

I tried to make a AJAX call to this API but i am getting a Network 403 Error

My code looks like this:

$.ajax({
  url : url,
    dataType : "jsonp",
    headers: { "Content-Type":"application/json","Accept": "application/json","Authorization": "OAuth oauth_token=ACCESSTOKEN" },
    type : 'POST',
    contentType: "application/json",

    data : {"firstName" : "FirstName", "lastName" : "lastNAme",
      "email" : "[email protected]"},

    success : function (data) {
      console.log(data);
    },
    error : function (data, errorThrown) {
      alert(3);
    }
});

Please help!!

Solution 1

According to the jQuery ajax() documentation,

headers (default: {})

Type: PlainObject

An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport. The header X-Requested-With: XMLHttpRequest is always added, but its default XMLHttpRequest value can be changed here. Values in the headers setting can also be overwritten from within the beforeSend function. (version added: 1.5)

You can set headers for your requests using the following according to Prestaul:

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

Make sure that you actually provided the correct ACCESSTOKEN.

Solution 2

Did you try using setRequestHeader the as a part the ajax call?

xhr.setRequestHeader

example below:

$.ajax({
  url : url,
    dataType : "jsonp",
    headers: { "Content-Type":"application/json","Accept": "application/json","Authorization": "OAuth oauth_token=ACCESSTOKEN" },
    type : 'POST',
    contentType: "application/json",
    data : {"firstName" : "FirstName", "lastName" : "lastNAme", "email" : "[email protected]"},
    beforeSend : function( xhr ) {
        xhr.setRequestHeader( "Authorization", "BEARER " + access_token );
    },
    success : function (data) {
      console.log(data);
    },
    error : function (data, errorThrown) {
      alert(3);
    }
});

I hope it would help.

Solution 3

You can try this.

$.ajax({
  url : url,
    dataType : "jsonp",
    headers: { "Content-Type":"application/json","Accept": "application/json","Authorization": "OAuth oauth_token=ACCESSTOKEN" },
    type : 'POST',
    contentType: "application/json",
    data : {"firstName" : "FirstName", "lastName" : "lastNAme", "email" :         "[email protected]"},

beforeSend : function setHeader(xhr){
                            xhr.setRequestHeader('X-VN-ad', "sdd");
                            xhr.setRequestHeader('X-VN-APs', "mei");
                        }