Access to XMLHttpRequest at <url> has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers

Question

Im trying to consume TomTom maps api to get the location .

My function :

  getLocationAddress(lat: number, lon: number) {
    const url = `${baseUrl}search/${versionNumber}/reverseGeocode/${lat},${lon}.json/?key=${apiKey}`;
    const headers = new HttpHeaders({
      "Content-type": "application/json",
      "Access-Control-Allow-Methods": "GET,OPTIONS,POST",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers":
        "Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Authorization,Content-Type",
    });
    const observable = this.http.get(url, { headers: headers }); 
    return observable;
  }

The url is correct and i have provided the headers as above . I cant get past this error:

Access to XMLHttpRequest at <url> has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response
      

TomTom is a 3rd party api server . The is routed to the correct location and i can see the response from the server on the browser when pasting the link in a new window

Answer 1

Based on the error message it appears your headers are misconfigured, specifically the "authorization" header attribute.

You may want to use their SDK and/or JS libraries, at it will set the headers for you.

You need to provide an API key, otherwise CORS policy will reject the requests, as shown in their examples https://developer.tomtom.com/maps-sdk-web-js/functional-examples#examples,code,vector-map.html