JSON解析报错：Unexpected token < at position 0问题排查求助

这个错误其实很典型，我来帮你拆解一下问题所在：

核心原因 #

你看到的<符号是HTML标签的开头，这说明fetch请求返回的不是你预期的JSON数据，而是一个HTML页面（大概率是404错误页面）。为什么会这样？

看你的请求URL：

`api.openweathermap.org/data/2.5/forecast?q=München,DE&appid=my_key`

这个URL缺少了https://前缀，浏览器会把它当成相对路径来处理——也就是从你当前网站的域名下去请求这个地址，而不是去访问OpenWeatherMap的API服务器。比如你当前网站是http://localhost:3000，浏览器实际请求的是http://localhost:3000/api.openweathermap.org/...，这个地址显然不存在，所以返回了404的HTML页面，自然解析JSON就会报错。

修复方案 #

• 给URL加上https://前缀，确保请求指向正确的API服务器，修正后的代码：

  let fetchWeather = async () => { 
    const weatherRequest = await fetch(`https://api.openweathermap.org/data/2.5/forecast?q=München,DE&appid=my_key`); 
    // 先检查请求是否成功，避免后续报错
    if (!weatherRequest.ok) {
      throw new Error(`请求失败：${weatherRequest.status}`);
    }
    const weatherStore = await weatherRequest.json(); 
    console.log(weatherStore);
  };
  

• 额外建议：在解析JSON之前，先通过weatherRequest.ok或者weatherRequest.status检查请求是否成功，这样能更清晰地排查问题——比如API密钥错误、城市名称格式问题等也会返回非200的状态码，提前判断能避免不必要的JSON解析错误。

验证方法 #

• 打开浏览器的开发者工具（按F12），切换到「Network」面板
• 触发你的fetchWeather函数，找到对应的请求项
• 点击该请求，切换到「Response」标签，查看实际返回的内容：如果是JSON格式，说明请求路径正确了；如果还是HTML，再检查URL是否拼写正确、API密钥是否有效

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