Блог

Я пишу новое приложение, используя Vue.js В рамках этого мне нужно получить токен API от третьей стороны. Приведенный ниже вызов ajax работает и возвращает ожидаемый объект данных ответа, однако вызов axios не проходит проверку и возвращает сообщение об ошибке «Имя пользователя и пароль не могут быть пустыми». Есть какие-нибудь идеи, что я делаю не так и почему эти два вызова обрабатываются по-разному?

     <script>
    $(function(){
        $.ajax(
            {
                type: "POST",
                url: "https://testapi.XXXXXXXX.com/auth",
                data: {
                        username:'TestUser',
                        password: 'TestPwd'
                    },
                success: function(res){
                    console.log("from jquery",res);
                }
            }
        )
    })
    </script>

   <script>
    var app = new Vue({
        el:"#vueapp",
        data:{
            api_key: null
        },
        methods:{
            getNewKey(){
                axios({
                    method: 'POST',
                    url:'https://testapi.XXXXXXXX.com/auth'
                    ,headers:{
                        'Content-Type':'application/x-www-form-urlencoded'
                    }
                    ,data:{
                        username:'TestUser',
                        password: 'TestPwd'
                    }
                })
                .then(response =>{
                    console.log("From Axios",response);
                })
            }
        },
        created(){
            this.getNewKey();
        }
    })
    </script>
  

Из документации axios:

https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

Вам нужно JSON.stringify вашего объекта, переданного в data .

 data: JSON.stringify({username:'TestUser', password: 'TestPwd'})