CORS 策略已阻止对 <url> 处的 XMLHttpRequest 的访问：Access-Control-Allow-Headers 不允许请求 header 字段授权

Question

我正在尝试使用 TomTom 地图 api 来获取位置。

我的函数：

  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;
  }

url 是正确的，我已经提供了上面的 headers。我无法克服这个错误：

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 是第 3 方 api 服务器。被路由到正确的位置，当将 link 粘贴到新的 window

时，我可以在浏览器上看到服务器的响应

Answer 1

根据错误消息，您的 header 似乎配置错误，特别是“授权”header 属性。

您可能想使用他们的 SDK and/or JS 库，它会为您设置 headers。

您需要提供一个 API 密钥，否则 CORS 策略将拒绝请求，如他们的示例所示 https://developer.tomtom.com/maps-sdk-web-js/functional-examples#examples,code,vector-map.html

CORS 策略已阻止对 <url> 处的 XMLHttpRequest 的访问：Access-Control-Allow-Headers 不允许请求 header 字段授权

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

tomtom

ionic-framework

ionic4