使用POST请求调用Here地图Route API遇401认证问题求助

我在用Here地图的Route图片API，官方说明它支持最大8k负载的POST请求处理大数据。但用axios和XMLHttpRequest发送POST请求时，把apiKey放在请求头里就一直返回401 Unauthorized错误，而将apiKey放在查询参数中时请求可正常工作，说明apiKey本身无问题，现寻求正确的POST请求配置及负载格式。

我尝试过的代码 #

XMLHttpRequest版本 #

const params = `apiKey=${getHereApiKey()}&w=${width}&h=${height}&lc0=${baseColor}&sc0=${baseColor}&lw0=5`;

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://image.maps.ls.hereapi.com/mia/1.6/route", true);
xhr.setRequestHeader("Content-Type", "Application/x-www-form-urlencoded");
xhr.setRequestHeader("Authorization","apiKey " + getHereApiKey());
xhr.send(params);

xhr.onload = function () {
  if (xhr.status != 200) {
    console.error(`Error ${xhr.status}: ${xhr.statusText}`);
  } else {
    console.log("xhr", xhr)
    setUrl(xhr.responseURL)
  }
};

Axios版本 #

请求体：

var body = {
  "apiKey": API_KEY,
  "routes": [
    {
      "waypoints": [
        {
          "lat": 37.99392,
          "lng": -122.99964
        },
        {
          "lat": 37.97011,
          "lng": -122.96910
        }
      ],
      "color": baseColor
    },
    {
      "waypoints": [
        {
          "lat": 37.77011,
          "lng": -122.46910
        },
        {
          "lat": 37.76122,
          "lng": -122.41488
        }
      ],
      "color": baseColor
    }
  ],
  "w": width,
  "h": height,
  "imageSize": {
    "width": width,
    "height": height
  }
}

请求配置：

const config = {
  headers: {
    apikey: API_KEY,
    "Content-Type": "application/json"
  }
};

axios.post('https://image.maps.ls.hereapi.com/mia/1.6/route', body, config)
  .then(response => {
    console.log("response", response)
    // handle response
  })
  .catch(error => {
    console.log("error", error)
    // handle error
  });

正确的POST请求配置 #

Here地图的Route图片API对POST请求的apiKey验证有特定规则，以下是两种方式的正确配置：

1. XMLHttpRequest（x-www-form-urlencoded格式） #

• 不需要在Authorization请求头中传递apiKey，直接将其放在请求体里即可，或者选择放在URL查询参数中
• 注意Content-Type需使用标准小写格式application/x-www-form-urlencoded

修正后的代码：

const params = `apiKey=${getHereApiKey()}&w=${width}&h=${height}&lc0=${baseColor}&sc0=${baseColor}&lw0=5`;

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://image.maps.ls.hereapi.com/mia/1.6/route", true);
// 修正Content-Type的大小写
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 移除无效的Authorization头，直接通过请求体传递apiKey
xhr.send(params);

xhr.onload = function () {
  if (xhr.status != 200) {
    console.error(`Error ${xhr.status}: ${xhr.statusText}`);
  } else {
    console.log("xhr", xhr)
    setUrl(xhr.responseURL)
  }
};

2. Axios（JSON格式请求体） #

• 该API接受JSON格式的POST请求，但apiKey仅支持通过URL查询参数或请求体中的apiKey字段传递，请求头中的apikey字段不被识别
• 无需同时在请求体和URL中重复传递apiKey，二选一即可

修正后的代码：

// 移除请求体中的apiKey（若选择在URL中传递）
var body = {
  "routes": [
    {
      "waypoints": [
        {
          "lat": 37.99392,
          "lng": -122.99964
        },
        {
          "lat": 37.97011,
          "lng": -122.96910
        }
      ],
      "color": baseColor
    },
    {
      "waypoints": [
        {
          "lat": 37.77011,
          "lng": -122.46910
        },
        {
          "lat": 37.76122,
          "lng": -122.41488
        }
      ],
      "color": baseColor
    }
  ],
  "w": width,
  "h": height
};

// 将apiKey放在URL查询参数中
const url = `https://image.maps.ls.hereapi.com/mia/1.6/route?apiKey=${API_KEY}`;

const config = {
  headers: {
    "Content-Type": "application/json"
  }
};

axios.post(url, body, config)
  .then(response => {
    console.log("response", response)
    // 处理响应，例如将返回的Blob转为可访问的图片URL
    const imageUrl = URL.createObjectURL(response.data);
    setUrl(imageUrl);
  })
  .catch(error => {
    console.log("error", error)
  });

关键注意事项 #

• 该API的POST请求不支持通过Authorization头或自定义apikey头传递密钥，仅支持URL查询参数或对应格式请求体中的apiKey字段两种方式
• 使用JSON格式请求体时，确保Content-Type设置为application/json，且请求体结构无需重复设置imageSize，w和h参数已足够定义图片尺寸
• 当请求负载较大（接近8k上限）时，优先选择通过请求体传递参数，避免URL长度限制导致的问题

内容的提问来源于stack exchange，提问作者Fernando Renaldo Louis