axios auth field doesn't set headers

Question

I'm passing auth to the axios request but it doesn't set authorization headers:

axios({
  method: 'GET',
  url: 'http://localhost:3001',
  auth: {
    username: 'foo',
    password: 'bar',
  },
}).then(console.log)

Am I missing something here?

Answer 1

When I reproduce your code from here: https://jsfiddle.net/jfriend00/w7ykvc16/9/, axios generates authorization: 'Basic Zm9vOmJhcg==' for me, but only on the second request as the first request is an OPTIONS request to get CORs pre-flight permission.

Since I'm doing this from a different origin, I had to enable CORs requests on my localhost server before I would get the header. The authorization header is NOT sent on the initial CORs pre-flight OPTIONS request. And, if you don't have code to handle that OPTIONS request, then the CORs permission is denised and then second request with the Authorization header is never sent.

This is what my server receives from the above JSFiddle link:

OPTIONS {
  host: 'localhost',
  connection: 'keep-alive',
  accept: '*/*',
  'access-control-request-method': 'GET',
  'access-control-request-headers': 'authorization',
  origin: 'https://fiddle.jshell.net',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'cross-site',
  'sec-fetch-dest': 'empty',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9'
}
GET {
  host: 'localhost',
  connection: 'keep-alive',
  'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"',
  accept: 'application/json, text/plain, */*',
  dnt: '1',
  authorization: 'Basic Zm9vOmJhcg==',
  'sec-ch-ua-mobile': '?0',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36',
  'sec-ch-ua-platform': '"Windows"',
  origin: 'https://fiddle.jshell.net',
  'sec-fetch-site': 'cross-site',
  'sec-fetch-mode': 'cors',
  'sec-fetch-dest': 'empty',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9',
  'if-none-match': 'W/"2-witfkXg0JglCjW9RssWvTAveakI"'
}

Note the first request is an OPTIONS request (CORs pre-flight) and does not include the Authorization header. The second is a GET request and does include it (after pre-flight received approval).