调用OpenWeatherMap API返回HTML而非JSON 解析时报Unexpected token <错误如何解决

问题根因 #

Unexpected token < in JSON at position 0 报错本质是接口返回了HTML格式内容（通常是站点404页面，首字符为<），不符合JSON解析规则。Postman请求正常是因为工具会自动补全请求协议，浏览器不会做该兼容处理。

代码存在的问题 #

• 接口地址缺失https://协议头，浏览器会将其识别为相对路径，拼接当前运行页面的域名发起请求，实际请求地址完全错误。
• 查询参数开头存在冗余&符号，?&q=的写法不符合URL参数规范，虽部分服务端可兼容，但存在解析失败风险。

修正后的代码 #

const Fetching = async () => {
  try {
    // 补全协议头，删除多余的&符号
    const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=31c3627d9d33b84c7a575fc11b6d7dfe');
    // 先校验响应状态
    if (!response.ok) {
      const errorText = await response.text();
      console.error('请求失败，响应内容：', errorText);
      return;
    }
    const responsedata = await response.json();
    console.log(responsedata);
  } catch (err) {
    console.error('请求处理失败：', err);
  }
};
Fetching();

补充说明 #

如果修正后仍有问题，可先调用response.text()打印完整响应内容，确认返回的具体页面信息排查问题，常见额外问题包括跨域配置错误、API密钥权限限制、请求IP被限流等。

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