React天气API请求报错：Unauthorized与JSON解析失败求助

问题根源 #

你遇到的两个错误是连锁反应：

• Unauthorized错误：API密钥验证失败（或接口权限不足），导致OpenWeatherMap服务器返回纯文本格式的错误提示（比如开头是"You need t..."的内容），而非预期的JSON数据。
• JSON解析错误：因为服务器返回的是文本而非JSON，调用res.json()时自然会抛出SyntaxError，无法将非JSON文本解析为JSON对象。

可能的具体原因 #

1. API密钥问题：
   • 密钥存在拼写错误、多余空格或未完全复制（即使你确认可用，也可能实际代码中存在输入失误）
   • 密钥对应的账号权限不足（比如免费计划无法访问onecall接口）
2. 接口权限限制：
   OpenWeatherMap的免费计划目前已不再支持onecall 3.0接口，如果你使用的是这个接口，会直接返回权限错误。
3. URL构建问题：
   拼接请求URL时可能存在格式错误（比如多/少斜杠，参数传递异常）

解决步骤 #

1. 先排查实际返回内容 #

修改getWeatherData函数，先捕获错误响应并打印返回的文本内容，明确服务器的具体错误提示：

const getWeatherData = (infoType, searchParams) => {
  const url = new URL(`${BASE_URL}/${infoType}`);
  url.search = new URLSearchParams({ ...searchParams, appid: API_KEY });

  return fetch(url)
    .then((res) => {
      // 先检查响应状态是否成功
      if (!res.ok) {
        // 读取错误响应的文本内容，打印出来
        return res.text().then((errorText) => {
          console.error('API错误响应:', errorText);
          throw new Error(`请求失败: ${res.status} - ${errorText}`);
        });
      }
      // 状态正常再解析JSON
      return res.json();
    });
};

运行代码后查看控制台，就能看到服务器返回的具体错误信息（比如"Invalid API key"或"You are not subscribed to this API"），针对性解决。

2. 验证API密钥有效性 #

直接在浏览器地址栏输入测试URL，替换成你的密钥：

https://api.openweathermap.org/data/2.5/weather?q=London&appid=你的API密钥

如果返回正常的天气JSON数据，说明密钥有效；如果返回错误文本，说明密钥确实有问题，需要重新生成或检查。

3. 检查接口权限 #

如果使用onecall接口，确认你的账号计划是否支持：

• 免费用户建议改用forecast接口获取预报数据，调整getFormattedWeatherData中的请求逻辑
• 若坚持使用onecall，需要升级OpenWeatherMap的付费计划

4. 修正URL构建（可选） #

确保URL拼接没有问题，使用模板字符串更直观：${BASE_URL}/${infoType}，避免手动拼接斜杠导致的格式错误。

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