DEV Community

Sebastiangperez
Sebastiangperez

Posted on

1

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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (1)

Collapse
 
sebastiangperez profile image
Sebastiangperez

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay