Axios: Cannot make call to API with Basic Auth

Question

I'm trying to issue a CORS get request in Vue via axios. Everything works well so far, but if I need to authenticate via basic auth, I cannot get it to work.

Heres my code

getData: function() {
  let vm = this; // assign vue instance to vm

  axios.get('url', {
    withCredentials: true,
    auth: {
      username: 'name',
      password: 'pass'
    }
  }).then(function(response) {
    console.log(response)
  }).catch(function(error) {
    console.log(error)
  }) 
}

Even though I entered the credentials, as well as the url correctly, I always get a 401 response. It looks like this.

HTTP/1.1 401 Authorization Required
Date: Wed, 01 Feb 2017 16:23:31 GMT
WWW-Authenticate: Basic realm="'Realm'"
Content-Length: 499
Keep-Alive: timeout=15
Connection: Keep-Alive
Content-Type: text/html; charset=iso-8859-1

The raw request looks like that

OPTIONS 'url' HTTP/1.1
Host: 'host'
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: GET
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76
Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
DNT: 1
Referer: http://localhost:9000/pages/blog_cc/blog_cc.html
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: de,en;q=0.8

What am I missing? With Postman and the exact same credentials, everything works like a charm. Even in Chrome directly.

I saw that this question was already asked a few times, but all the posed answers on other threads are no solution for me. I cannot issue the request from node, for example.

Edit: I also tried issuing a request with vanilla JS, also to no avail. It seems the problem lies in the backend. Here's my code, nevertheless.

let xml = new XMLHttpRequest();
xml.open('GET', api, true);
xml.setRequestHeader('Authorization', 'Basic: ' + btoa(user + ':' + pass));
xml.send();

Solution 1

I had the same experience and my workaround was using the following set up to deal with communicating with an OAuth server we had set up:

axios({
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  method: "post",
  url: REVOKE_URL,
  auth: {
    username: CLIENT_ID,
    password: CLIENT_SECRET
  },
  data: {
    datastuff: actualData
  }
});

This worked after futile attempts at using axios.post for days.

Axios version: 0.18.0

Solution 2

So I was looking for example of how to do a post for this and couldn't find a good one. Got it working and it looks like:

const { MAILCHIMP_KEY } = process.env;

const url = "https://us{yourRegionNumber}.api.mailchimp.com/3.0/lists/{yourlistid}/members/";

const client = axios.create({
  auth: {
    username: "yourmailchimpusername",  //This could be your email
    password: MAILCHIMP_KEY
  },
  headers: {
    "Content-Type": "application/json"
  }
});

const mailChimpRes = await client.post(url, {
  email_address: `${email}`,
  status: "subscribed",
  merge_fields: {
    FNAME: `${firstName}`,
    LNAME: `${lastName}`
  }
});

Comments

[Robin Löffel]

It actually is a CORS request, thanks, I totally forgot mentioning that! But even with withCredentials: true, the error stays.

[theleebriggs]

Does the OPTIONS request fail or the follow on GET?

[Robin Löffel]

I don't really know, as it's my first time working so closely with REST. But in my console, first, I see OPTIONS 'url' 401 (Authorization Required) and then XMLHttpRequest cannot load 'url'. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 401.. But the second message is weird, since Access-Control-Allow-Origin should be set to "*". How can I further investigate this?

[theleebriggs]

Yeah, that message from the backend can hide a variety of things in my experience, you also need to allow the backend to receive the Authorization header, this will probably throw up wildcards not being allowed with an auth header, so you may then need to either a) hard code the allowed url, or dynamically use the referrer.

[Robin Löffel]

Thank you very much! I'll share this with the backenders in my team! But how is it, that requests in Postman and Chrome go through?

[theleebriggs]

Because Postman doesn't make the OPTIONS request it operates without CORS. So it will just be sending a GET.