I have a page that is supposed to display SharePoint list data. I was able to get it to work using REST API but since I’m using VUE.js framework, I wanted to try axios. I don’t get an error when I look in the console but I do see a bunch of xml data instead of json. What am I doing wrong? Here’s my code
<head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <table> <tr> <th>Email</th> <th>First Name</th> <th>Last Name</th> <th>Phone</th> </tr> <tr v-for="user in users"> <td>{{ user.Title }}</td> <td>{{user.First_x0020_Name}}</td> <td>{{user.Last_x0020_Name}}</td> <td>{{ user.Phone }}</td> </tr> </table> {{fieldNames}} </div> <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { fieldNames: "HELLO SharePoint 2013", status: '', users: [] }, created: function(){ this.getListData(); }, methods: { getListData: function(){ var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('siteAdmins')/items"; /*var headers = { "accept": "application/json;odata=verbose" };*/ this.status = "getting data..."; var vm = this; axios.get(endPointUrl).then(response => { console.log(response.data); vm.users = response.data /*for (var i = 0; i < response.data.value.length; i++) { vm.users.push({ title: String(response.data.value[i]["Title"]), fName: response.data.value[i]["First_x0020_Name"] != null ? String(response.data.value[i]["First_x0020_Name"]) : "", lName: response.data.value[i]["Last_x0020_Name"] != null ? String(response.data.value[i]["Last_x0020_Name"]) : "", phone: response.data.value[i]["Phone"] != null ? String(response.data.value[i]["Phone"]) }); console.log(resonse.data.value[i].Title); }*/ }); } } }); Here’s an image of what I see in the console. 
