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();

It only worked for me with this: https://stackoverflow.com/questions/53222999/axios-basic-auth-not-working-with-get-request/53939140#53939140 Maybe it helps you :D — Karen Garcia, Dec 27 '18 at 02:37

score 5 · Answer 1 · edited Jun 25 '20 at 22:06

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

score 1 · Answer 2 · answered Nov 07 '17 at 13:05

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}`
  }
});

score 0 · Answer 3 · answered Feb 01 '17 at 16:45

0

You could try passing the withCredentials: true, option to the Axios request, if it's a cross site request.

answered Feb 01 '17 at 16:45

theleebriggs

571
2
5

It actually is a CORS request, thanks, I totally forgot mentioning that! But even with `withCredentials: true`, the error stays. – Feb 01 '17 at 16:49
Does the OPTIONS request fail or the follow on GET? – theleebriggs Feb 01 '17 at 16:54
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? – Feb 01 '17 at 17:01
1

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. – theleebriggs Feb 01 '17 at 17:07
1

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? – Feb 01 '17 at 17:17
Because Postman doesn't make the OPTIONS request it operates without CORS. So it will just be sending a GET. – theleebriggs Feb 02 '17 at 12:52

score 0 · Answer 4 · answered Oct 04 '17 at 15:32

0

According to their docs, mailchimp does not support client-side requests, so you have to route it through server-side :/

answered Oct 04 '17 at 15:32

Alex Ting

31
2

Axios: Cannot make call to API with Basic Auth

4 Answers4