Set Request Header jQuery Ajax

Question

I'm stuck in a very strange problem, I want to send an extra param Authorization in my ajax request to a service, just like this

Request headers
Authorization: bearer t-3e57cc74-3e7a-4fc7-9bbb-f6c83252db01
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie: JSESSIONID=908D73C50F09E75C9A0D674C4CB33D2F; ROUTEID=.1; __unam=3c3246b-13bc693352d-aa1535c-1

But Using this code

headerParams = {'Authorization':'bearer t-7614f875-8423-4f20-a674-d7cf3096290e'};
    obj = {
        type: 'get',
        url: 'https://api.sandbox.slcedu.org/api/rest/v1/students/test1',
        headers: headerParams,
    data: [],
    dataType: 'json',
    processData: false,
    success: function(data) {
        console.log('success');
        console.log(data);
    }
};

  jQuery.ajax(obj);

It send like this which is not passing the value, also its request type become OPTION instead of GET, here is console log

Accept: */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Access-Control-Request-Headers  authorization
Access-Control-Request-Method   GET
Connection  keep-alive
Host    api.sandbox.slcedu.org
Origin  http://localhost
User-Agent  Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0

Can anyone tell me how can I pass it like this Authorization: bearer t-3e57cc74-3e7a-4fc7-9bbb-f6c83252db01

Thanks

I checked it, its because of Cross Domain Call, How can I fix it? — MZH
– MZH, Commented Dec 23, 2012 at 12:57
Have a look at this thread: stackoverflow.com/questions/3506208/jquery-ajax-cross-domain — user625860
– user625860, Commented Dec 23, 2012 at 15:59

Timo Huovinen · Accepted Answer · 2018-04-04 15:03:57Z

80

Using the beforeSend pre-request callback we can achieve this.

$.ajax({
url: 'https://api.sandbox.slcedu.org/api/rest/v1/students/test1',
type: 'GET',
beforeSend: function (xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer t-7614f875-8423-4f20-a674-d7cf3096290e');
},
data: {},
success: function () { },
error: function () { },
});

edited Apr 4, 2018 at 15:03

Timo Huovinen

56k34 gold badges163 silver badges150 bronze badges

answered Nov 4, 2013 at 11:09

Ramesh

4,3032 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chiu Over a year ago

it works, but it should be "Bearer" instead of "bearer"

Nicolas Janel · Accepted Answer · 2015-09-03 09:49:11Z

28

And you can set it for all requests with ajaxSetup

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Authorization', '...');
    }
});

answered Sep 3, 2015 at 9:49

Nicolas Janel

3,0751 gold badge30 silver badges31 bronze badges

2 Comments

Oranges13 Over a year ago

In my case I needed to set this for an X-CSRF-Token header and this solved my issue.

Christopher Over a year ago

Please note that on their docs page they strongly recommend against this. "This can cause undesirable behavior since other callers (for example, plugins) may be expecting the normal default settings."

openwonk · Accepted Answer · 2019-09-20 07:51:13Z

Another option, specify with "headers" key.

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://api.example.com/action",
    "method": "POST",
    "headers": {
        "Content-Type": "application/x-www-form-urlencoded",
        "Authorization": "Bearer eyJraWQiOiJBbWZJSXU3UFhhdXlUbHM3UmNyZmNIQUd1MUdCWkRab2I0U05GaVJuWUFJPSIsImFsZyI6IlYYYjU2In0.eyJzdWIiOiJjNTYyEEE1ZS05Zjc3LTQ2NDAtYTFmOS1hJJJ5Njk1OGE0MzUiLCJhdWQiOiI3Z2ZsZnNmMm1vNnQ4dXJpOG0xcHY5N3BnayIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJldmVudF9pZCI6ImE2YWFjOTQxLTYzYWUtNGU5ZS1iYTE1LTRlYTNlOGIyZjQ5MSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNTY4OTY0NDI2LCJpc3MiOiJodHRwczpcL1wvY29nbml0by1pZHAudXMtd2VzdC0yLmFtYXpvbmF3cy5jb21cL3VzLXdlc3QtMl9qanRiZFZkZEYiLCJjb2duaXRvOnVzZXJuYW1lIjoiYzU2MmFjNWUtOWY3Ny00NjQwLWExZjktYTgxOTY5NThhNDM1IiwiZXhwIjoxNTY4OTY4MDI2LCJpYXQiOjE1Njg5NjQ0MjcsImVtYWlsIjoiYnJ5YW5Ab3BlbndvbmsuY29tIn0.fV4bgaKwXx-HjrBmGtBnSzaDHdP0JEeJ0sbE6MzuOJYWafT5gWfh9pLtkpUv-mgsnX3cVIWDVKC0H8_XM4ziUhsulZIRBwTiSca0CfABvanuMdbdjk1iK70aUxsrjHX0gK4SDUi4Zl6JNGws_SRbVi9Yq_ntx7ttXfUpZHjimfZ2mLidOLUruYctG1V_gU-dLD6CARCUbGh5aRk5nwX_5-HBUTbBVPYK3sXcVg2YRk63d-p3TITA5hoOEj9lxtHs3ZM7ZqNPl0XPUGghxdbvWnpSIUKrFLugRHqCiWxC38ZYiBhP0NDYoEMaOI-UrnEH1W6j-kr3fnH2LD5wOMJ_8Q"
    },
    "data": {
        "someData": someData
    }
}

$.ajax(settings).done(function (response) {
    console.log(response)
})

Collectives™ on Stack Overflow

Set Request Header jQuery Ajax

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related