调用open-elevation API返回400 Invalid JSON错误的解决方法

错误原因 #

返回Invalid JSON错误是由于fetch请求的配置存在两个问题：

• 直接将原生JS对象传入body参数：fetch的body不支持直接接收JS对象，需要先序列化为JSON字符串
• 未指定Content-Type请求头：服务端无法识别请求体的格式，无法正常解析传入内容

修正后的完整代码 #

function get_altitude () {
  let data = {
    "locations": [
      {
        "latitude": 10,
        "longitude": 10
      },
      {
        "latitude":20,
        "longitude": 20
      },
      {
        "latitude":41.161758,
        "longitude":-8.583933
      }
    ]
  };
  fetch('https://api.open-elevation.com/api/v1/lookup', {
    method:'POST',
    // 配置请求头，声明请求体为JSON格式
    headers: {
      'Content-Type': 'application/json'
    },
    // 将JS对象序列化为JSON字符串
    body: JSON.stringify(data)
  })
  .then(function (response) {
    // 增加响应状态校验，方便后续排查问题
    if (!response.ok) {
      throw new Error(`请求异常，状态码：${response.status}`);
    }
    return response.json();
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    // 统一捕获请求全流程的错误
    console.error('调用失败：', error);
  });
}
get_altitude();

补充说明 #

代码额外增加的响应状态校验和全局错误捕获逻辑为调试用，不需要可以直接删除，不影响核心功能的正常使用。

内容的提问来源于stack exchange，提问作者M7kra