401 Ошибка HTTP при базовом GET-запросе аутентификации от Axios к API - PullRequest
Новая
       7

401 Ошибка HTTP при базовом GET-запросе аутентификации от Axios к API

0 голосов
/ 22 сентября 2018

Я создаю API, основанный на Flask (расширенный с flask-restful), и приложение внешнего интерфейса с Vue.js.

Оба в настоящий момент работают на localhost.flask: 127.0.0.1:5000, vue: localhost:8080/

Я вызываю API, используя axios .Первый вызов привел к ошибке CORS, поэтому я установил расширение flask-CORS, и ошибка CORS исчезла.

По API, URL http://127.0.0.1:5000/signin можно вызвать с помощью метода GET и требует Basic Authавторизации.Если данные авторизации действительны, токен возвращается.В Почтальоне это прекрасно работает.В моем приложении Vue.js вызывается API через axios, например: 

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

... консоль в браузере выдает: Error: "Request failed with status code 401".

В Postman API-вызов работает нормально, а также используется CURL: 

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

возвращает 

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...." 
}

Почемуя получаю ошибку 401 при вызове API через Axios?

Спасибо за вашу помощь!

Ответы [ 3 ]

0 голосов
/ 22 сентября 2018

У меня есть два шага, чтобы помочь вам.

Шаг 1:

Печать запроса журнала в вашем API http://127.0.0.1:5000/signin для просмотра результатов из вашего сообщения, например: 

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

Шаг 2:

Проверка статуса ответа от вашего 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)
        });
    }
0 голосов
/ 22 сентября 2018

ОК, я нашел решение, но я не совсем уверен, почему это работает.this.email и this.password получают свои значения через директиву v-model из формы и сохраняются в объекте data ().Так что я думаю, что при вызове API через Axios состояние не сохраняется.Поэтому, когда я записываю значения this.email и this.password в свежие переменные перед передачей их в axios, значения из передаются и запрос работает.

В конце концов, это была не проблема с axios, а мое отсутствие знаний о том, как работает Vue.js.

    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)
        });
    }
0 голосов
/ 22 сентября 2018

Способ передачи параметров неверен.Пожалуйста, посмотрите на код ниже.При вызове get параметры передаются в объекте params. 

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