DEV Community

Sebastiangperez
Sebastiangperez

Posted on

Axios, Vue, Laravel and External Api (Fixed)

I like to know why using fetch works and using axos gives me a CORS error.
Im only using vue for fetching the data, i dont have any api from laravel, i just have a call from a simple componen on the mounted method and call it from the internal method like this :
mounted() {
this.fetch();
},
methods:{
fetch(){
axios.get('/search/shows?q=bluebook')
.then(function (result){
console.log();
})
}
}

if i do this, i got a cors error , if i switch from axios to fetch , works without a problem.

In the bootstrap.js file i have this:

window.axios.defaults.baseURL = 'http://api.tvmaze.com';
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = '';
window.axios.defaults.headers.common['Content-Type'] = 'text/plain';
window.axios.defaults.headers.common['Access-Control-Request-Method'] = '
';

also i tested using crossOrigin : true inside the get function but i got the same error.

there is a bug in axios? in laravel? im missing something here?

Thanks

Top comments (1)

Collapse
 
sebastiangperez profile image
Sebastiangperez

Fixed, i just eliminate everything in the bootstrap.js referring to axios header