My axios call has been blocked by CORS policy

REST APIs
#1

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.

#2

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
#3

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.