I attempted to consume an API using Axios in VueJS, but encountered an error when trying to fetch data. When I console log(res.data), it throws an error saying "Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined". Can someone please assist me? It seems like I may have overlooked something.
Here is the code snippet in API.Js file:
import axios from 'axios';
import API from '../API';
var urlLogin = API.url.host + '/login';
var login = {
init: function(){
this.vueConfig();
if(localStorage.getItem('token') != null){
window.location.replace("./input-mobile.html");
}
},
vueConfig: function(){
var app = new Vue({
el: '#app',
data: {
isSubmit: false,
email: "email",
password: "password",
},
methods: {
submitLogin: function(){
this.isSubmit = true;
axios.post()
axios({
method: 'post',
url: urlLogin,
data: {
email: this.email,
password: this.password
}
}).then(res =>{
console.log(res.data);
this.isSubmit = false;
localStorage.setItem("token", res.data.access_token);
localStorage.setItem("name", res.data.fullname);
window.location.replace("./input-mobile.html");
}, err =>{
console.log(err);
this.isSubmit = false;
});
}
}
});
}
}
module.exports = login;
The API appears to be functioning correctly as it gives the correct response in the network tab (inspect) of the browser. However, there seems to be a problem with fetching the data.