My axios call has been blocked by CORS policy

Hi everyone!

I’m having issues with the geocode API, this is what I wrote in the js file, I’m in a Laravel 7 project and I’m using VueJs and axios:

axios.get('https://api.tomtom.com/search/2/geocode/{query}.JSON?key={key}).then(data => {console.log(data.data)})

This is the error I get:

Access to XMLHttpRequest at ‘https://api.tomtom.com/search/2/geocode/{query}.JSON?key={key}’ from origin ‘{localhost}’ has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

Of course I replaced {query} and {key} with the correct values and it works with external API call services.

I can’t understand if the error comes from a bug in my code or from the API.

Thanks for helping.

Can you configure axios to not add this header while sending requests to our APIs?
If you remove this header then it is treated as a simple request and preflight is not needed then.

1 Like

To add another $0.02 - deploy your project to some external web server.
That would resolve the issue with CORS. Testing from localhost is what causes the issue here.