CORS policy following Maps SDK For Web (V6) Tutorial

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?

<KEY> should be replaced with your API key.

1 Like

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).

Can you check the response of that preflight request?

1 Like

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

Is the key surrounded with brackets or quotation marks?

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

Remove them.
It should look similar to this:

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

Working at all. Thank you!