javascript - jquery ajax post 和 axios post 的区别

Question

我正在使用 Vue.js 编写一个新应用程序，其中我需要从第 3 方获取 API token 。下面的 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>

Answer 1

来自 axios 文档:

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

您需要对data中传递的对象进行JSON.stringify。

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