How to set multiple headers data with XMLHttpRequest in async mode?

Question

My api call requires me to pass the api key in the headers, but I'm getting error back from the api service {"error":"2424452","message":"Invalid Api Key"}

I know my api key is valid as I can make the same api call in Python just fine, example:

req = requests.Session()
req.headers.update({'x-api-key': 'my-api-key', 'X-Product': 'my-product-name'})
req.get(url)

But in javscript, the same call errors out. I believe I'm not setting the headers correctly or something?

var req = new XMLHttpRequest();
req.onreadystatechange=handleStateChange;
req.open("GET", "url", true);
req.setRequestHeader("Host", "api.domain.com", "x-api-key", "my-api-key", "X-Product", "my-product-name");
req.send();

• This XMLHttpRequest is not a browser call, rather in an application that support XMLHttpRequest.

Answer 1

setRequestHeader sets one header and takes two arguments (the name and the value).

If you want to set multiple headers, then call setRequestHeader multiple times. Don't add extra arguments to the first call.

Answer 2

In case you don't want to set multiple headers explicitly you can use

function setHeaders(headers){
  for(let key in headers){
    xhr.setRequestHeader(key, headers[key]) 
  }
}
setHeaders({"Host":"api.domain.com","X-Requested-With":"XMLHttpRequest","contentType":"application/json"})