401 HTTP error on basic auth GET request from Axios to API

Question

I am creating an API based on Flask (extended with flask-restful) and a frontend appliation with Vue.js.

Both are running on localhost for now. flask: 127.0.0.1:5000, vue: localhost:8080/

I call the API using axios. The first call resulted in an CORS error, so i installed the flask-CORS extension and the CORS-error disappeared.

API-wise, the URL http://127.0.0.1:5000/signin can be called via the GET method and requires Basic Auth authorization. If the auth data is valid, a token is returned. In Postman this works perfectly fine. In my Vue.js application calling the API via axios like this:

    signIn() {
        const session_url = 'http://127.0.0.1:5000/signin'

        axios.get(session_url, {}, {
            auth: {
              username: this.email,
              password: this.password
            }
        }).then(response => {
          console.log('Authenticated')
          console.log(response.data)
          /*this.$store.dispatch('signin', response.data)*/
        }).catch(error => {
          console.log('Error on Authentication')
          this.error = error
          console.log(error)
        });
    }

... the console in the browser throws: Error: "Request failed with status code 401".

In Postman the API call is working fine, as well as using CURL:

 curl -u Hans:testing -i -X GET http://127.0.0.1:5000/signin

returns

HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 180
Access-Control-Allow-Origin: *
Server: Werkzeug/0.14.1 Python/3.6.4
Date: Sat, 22 Sep 2018 14:22:37 GMT

{
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...." 
}

Why do i get the 401 error when calling the api via axios?

Thanks for your help!

Answer 1

OK i found the solution, but i am not quite sure why this is working. this.email and this.password get their values via the v-model directive from the form and are saved in an data() object. So i guess when calling the api via axios the state is not saved. So when i write the values of this.email and this.password into fresh variables before passing them to axios, the values from are transmitted and the request works.

Afterall, it was not an issue with axios but my lack of knowledge about how Vue.js works.

    signIn() {
        const session_url = 'http://127.0.0.1:5000/signin'
        var username = this.email
        var password = this.password
        axios({
            method: 'get',
            url: session_url,
            auth: {
              username: username,
              password: password
            }
        })
        .then(response => {
          console.log('Authenticated')
          console.log(response.data)
          /*this.$store.dispatch('signin', response.data)*/
        }).catch(error => {
          console.log('Error on Authentication')
          this.error = error
          console.log(error)
        });
    }

Answer 2

Way you are passing params is incorrect. Please take a look at the below code. In get call params are passed within params object.

axios.get(session_url, {params : {username: 'x',  password:'y'}}).then()

Answer 3

I have two step in helping you.

Step 1:

Print log request into your API http://127.0.0.1:5000/signin for view results from your post like:

from flask import request

@app.route('/signin', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        return do_the_login()
    else:
        return show_the_login_form()

Step 2:

Check status response from your API:

 signIn() {
        //check code
        console.log("email",this.email);
        console.log("pass", this.password);
        const session_url = 'http://127.0.0.1:5000/signin'
        axios.get(session_url, {}, {
            auth: {
              username: this.email,
              password: this.password
            }
        }).then(response => {
          console.log(response);
          //console.log('Authenticated')
          //console.log(response.data)
          /*this.$store.dispatch('signin', response.data)*/
        }).catch(error => {
          console.log('Error on Authentication')
          this.error = error
          console.log(error)
        });
    }

Answer 4

Also check this:

.catch(error => {
    console.log(error.response.data);
});

Right there you can find your response messages from your api.