如何解决SyntaxError：意外标记'<'，"<!doctype..."不是有效JSON错误

这个错误的核心原因是：你的请求返回了HTML内容（比如404错误页、权限错误页），而非预期的JSON数据，调用response.json()时自然会解析失败。

代码里的明显问题 #

你把API_KEY直接作为请求URL的前缀了，这完全错误。正确的写法应该是天气服务的接口地址作为URL前缀，API_KEY作为参数传递（比如appid参数）。

修正后的代码示例 #

以OpenWeather接口为例（其他天气服务逻辑类似）：

// 替换为对应天气服务的接口地址
const WEATHER_API_BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';
// 你的合法API密钥
const API_KEY = '你的密钥内容';

let getWeatherInfo = async ()=>{
  try {
    // 拼接正确的请求URL
    let response = await fetch(`${WEATHER_API_BASE_URL}?q=${city}&appid=${API_KEY}`);
    
    // 先检查请求是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    
    let jsonResponse = await response.json();
    console.log(jsonResponse);
  } catch (error) {
    console.log("处理响应时出错:", error);
  }
};

额外排查步骤 #

• 打开浏览器开发者工具的「Network」面板，查看请求的实际URL和返回内容，确认是不是合法的JSON
• 检查city变量是否有正确赋值，避免空值或非法字符导致接口返回错误页
• 确认API_KEY是否有效、未过期，且对应权限包含你请求的接口

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