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: stackoverflow.com/questions/53222999/… Maybe it helps you :D — Karen Garcia
– Karen Garcia, Commented Dec 27, 2018 at 2:37

Monasha · Accepted Answer · 2020-06-25 22:06:55Z

5

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

edited Jun 25, 2020 at 22:06

Monasha

1,1521 gold badge13 silver badges19 bronze badges

answered Aug 13, 2018 at 21:04

Jeff L

1412 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Katpas · Accepted Answer · 2017-11-07 13:05:11Z

1

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

answered Nov 7, 2017 at 13:05

Katpas

1237 bronze badges

Comments

theleebriggs · Accepted Answer · 2017-02-01 16:45:04Z

0

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

answered Feb 1, 2017 at 16:45

theleebriggs

5813 silver badges6 bronze badges

6 Comments

user7026341 Over a year ago

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

theleebriggs Over a year ago

Does the OPTIONS request fail or the follow on GET?

user7026341 Over a year ago

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 Over a year ago

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.

user7026341 Over a year ago

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?

|

Alex Ting · Accepted Answer · 2017-10-04 15:32:45Z

0

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

answered Oct 4, 2017 at 15:32

Alex Ting

312 bronze badges

Collectives™ on Stack Overflow

Axios: Cannot make call to API with Basic Auth

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related