setRequestHeader not adding authorization header

Question

I am trying to send a http POST with Authorization header from javascript and found many answers recommending this config

var device_address = 10.25.148.164;
var device_login = myusername;
var device_password = mypassword;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://' + device_address + '/rest/conf', true);
xhr.setRequestHeader('Authorization', 'Basic ' + btoa(device_login + ':' + device_password));
xhr.send();

The above config is not working for me, and I get status code 401 :Unauthorized" ; from Wireshark packet capture, I see the following

Hypertext Transfer Protocol
OPTIONS /rest/conf HTTP/1.1\r\n
    [Expert Info (Chat/Sequence): OPTIONS /rest/conf HTTP/1.1\r\n]
        [OPTIONS /rest/conf HTTP/1.1\r\n]
        [Severity level: Chat]
        [Group: Sequence]
    Request Method: OPTIONS
    Request URI: /rest/conf
    Request Version: HTTP/1.1
Host: 10.25.148.164\r\n
Connection: keep-alive\r\n
Access-Control-Request-Method: POST\r\n
Origin: http://10.120.22.225:3000\r\n
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36\r\n
Access-Control-Request-Headers: authorization\r\n
Accept: */*\r\n
Referer: http://10.120.22.225:3000/myapp/1/edit?\r\n
Accept-Encoding: gzip, deflate, sdch\r\n
Accept-Language: en-US,en;q=0.8\r\n
\r\n
[Full request URI: http://10.25.148.164/rest/conf]
[HTTP request 1/1]
[Response in frame: 14]

However, if I send the POST from Postman it works, and Wireshark packet capture shows the following

Hypertext Transfer Protocol
POST /rest/conf HTTP/1.1\r\n
Host: 10.25.148.164\r\n
Connection: keep-alive\r\n
Content-Length: 0\r\n
Accept: application/json\r\n
Cache-Control: no-cache\r\n
Origin: chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop\r\n
Authorization: Basic <original_string_removed_from_here>\r\n
    Credentials: myusername:mypassword
Content-Type: application/json\r\n
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36\r\n
Postman-Token: 4ec1726d-dced-eede-625b-17f9b8f3e0fe\r\n
Accept-Encoding: gzip, deflate\r\n
Accept-Language: en-US,en;q=0.8\r\n
\r\n
[Full request URI: http://10.25.148.164/rest/conf]
[HTTP request 1/1]
[Response in frame: 19]

I tried window.btoa instead of btoa, I tried adding

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');

but nothing worked.

Anyone can please tell me what am I missing?

Update 1

I used a staging server and enabled Access-Control-Allow-Origin: *, but the response is still 401 Unauthorized

Hypertext Transfer Protocol
HTTP/1.1 401 Unauthorized\r\n
    [Expert Info (Chat/Sequence): HTTP/1.1 401 Unauthorized\r\n]
        [HTTP/1.1 401 Unauthorized\r\n]
        [Severity level: Chat]
        [Group: Sequence]
    Request Version: HTTP/1.1
    Status Code: 401
    Response Phrase: Unauthorized
Access-Control-Allow-Origin: *\r\n
Content-Type: application/json\r\n
Vyatta-Specification-Version: 0.3\r\n
Cache-Control: no-cache\r\n
Content-Length: 47\r\n
    [Content length: 47]
Date: Sat, 10 Dec 2016 02:25:48 GMT\r\n
Server: lighttpd/1.4.35\r\n
\r\n
[HTTP response 1/1]
[Time since request: 0.000526000 seconds]
[Request in frame: 19]
File Data: 47 bytes

JavaScript Object Notation: application/json

score 0 · Answer 1 · answered Dec 07 '16 at 05:38

0

Is this a cross-origin browser request if so this will be blocked as a security measure, from where are you initiating the request can I get the url and any other data might be helpfull and sorry had to post this as an answer can't comment hope this is helpfull

P.S- If you have a staging url try it from there after uploading your code might work

answered Dec 07 '16 at 05:38

Akshay Venugopal

451
2
9
22

I see your orgin of the request as – Akshay Venugopal Dec 07 '16 at 06:04
'Origin: http://10.120.22.225:3000\r\n' and the origin from postman is 'Origin: chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop\r\n ' the thing is you need a valid origin, if you have a staging server check it from there most probably it will work since staging servers have the required security certificates – Akshay Venugopal Dec 07 '16 at 06:11
also if that is not available you could try adding http headers to allow cross origin requests try this [link](http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – Akshay Venugopal Dec 07 '16 at 06:16
dose this answere your question – Akshay Venugopal Dec 07 '16 at 11:34
@ Akshay Venugopal : thanks for your answer. I have no control over the server, and even if I can make it work on a staging server, I'll still need to make it work on the target server. Is there a way to make the server accept these Rest call from my browser? – rh4games Dec 07 '16 at 15:30
let me check if i can find a solution – Akshay Venugopal Dec 08 '16 at 06:30
I used a staging server and enabled Access-Control-Allow-Origin: *, but the response is still 401 Unauthorized. Please see Update 1 above. – rh4games Dec 10 '16 at 19:28
Dose this website have username and password authentication if yes most probably you might need to send username and password with the request you are sending else if you are already logged in you might need to send the authToken and userId you got as a response to authenticate your request to get a valid response from the server see here [link](https://httpstatuses.com/401) or here [link2](https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html) you might need to refer the API document on how the request is sent and the backend authentication works @rh4games – Akshay Venugopal Dec 12 '16 at 04:53
If thats not the issue you might need to get in touch with the system administrator of the server since the server is blocking your requests and he or she need to do something about it This is a sample request {"authtoken":"************","loginuserid":"**********************************"} – Akshay Venugopal Dec 12 '16 at 05:00
Thanks @Akshay for the response. The target server is accepting the same requests from Postman, but not from my JavaScript code listed in my original question. All I need is figure out why? I verified by using alert() that my script is generating the exact same btoa string, but I'm still getting code 401 Unauthorized response. – rh4games Dec 13 '16 at 04:09

setRequestHeader not adding authorization header

1 Answers1