CORS policy following Maps SDK For Web (V6) Tutorial

Maps SDK for Web (JavaScript)
#1

Hi!
I just started with Tomtom, and I’m following the Maps SDK For Web (V6).

I just copy and paste the HTML code and try it through Xampp Apache local server, but it doesn’t work.

I’m receiving the following errors:

Access to XMLHttpRequest at ‘https://api.tomtom.com/map/1/copyrights/caption.json?key=<KEY>&sessionId=d4f17d94-f52a-4853-996e-6f3d23145387’ from origin ‘ORIGIN’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

xhr.js:178
GET https:// api.tomtom. com/map/1/copyrights/caption.json?key=%3CKEY%3E&sessionId=d4f17d94-f52a-4853-996e-6f3d23145387 net::ERR_FAILED

I tried both localhost and a website hosted in GoDaddy, with the same result (errors).

What I’m doing wrong?

#2

<KEY> should be replaced with your API key.

1 Like
#3

Yes, I did in my code.
I just put KEY instead of the real key in the post.

I’m using exactly the same code as the tutorial, replacing the 4 placeholders (your-product-name, your-product-version, your-tomtom-API-Key, version).

#4

Can you check the response of that preflight request?

1 Like
#5

I’m not sure if this is what you mean:

https://api.tomtom.com/map/1/copyrights/caption.json?key=<KEY>&sessionId=98ded454-5031-4bfc-9f17-e21f1b61440d

This XML file does not appear to have any style information associated with it. The document tree is shown below.

Developer Inactive

#6

Is the key surrounded with brackets or quotation marks?

#7

In both the code and the error messages the format is , surrounded by <>.

#8

Remove them.
It should look similar to this:

tt.map({
      key: 'abc...xyz',
      container: 'map'
  });
1 Like
#9

Working at all. Thank you!