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" : "abc@xyz.com"},

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

Please help!!

possible duplicate of [How can I add a custom HTTP header to ajax request with js or jQuery?](http://stackoverflow.com/questions/7686827/how-can-i-add-a-custom-http-header-to-ajax-request-with-js-or-jquery) — Ivan, Aug 01 '14 at 16:51

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

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.

score 2 · Answer 2 · answered Oct 13 '15 at 17:43

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" : "abc@xyz.com"},
    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.

When an API asks to provide an Access Token, is the generally provided by the API vendor? — Si8, Aug 11 '22 at 21:57

score 1 · Answer 3 · answered Sep 21 '16 at 07:32

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" :         "abc@xyz.com"},

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

How to call Rest API with JQUery with additional Headers

3 Answers3