如何调用Open Weather Map API？Postman正常但浏览器fetch报404

问题根因 #

你在fetch方法中传入的Open Weather Map接口地址缺失https://协议头，浏览器会将无协议的路径识别为当前站点的相对路径，自动拼接你本地开发服务的地址http://127.0.0.1:5500/，最终请求的是不存在的本地路径，因此返回404错误。Postman发送请求时会自动补全缺失的协议头，所以请求可以正常响应。

修复方案 #

给接口地址补充https://协议前缀即可，修改后的代码如下：

// 调用天气接口
async getWeather() {
    console.log("efsfs");
    // 补充https协议头修正请求路径
    const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=3f071776be6f7ccd417bfb1da2910---');
    const responseData = await response.json();
    return responseData;
}

// 接口调用代码保持不变
weather.getWeather()
    .then(results => {
        console.log(results)
    })
    .catch(err => console.error(err));

注意事项 #

• 不要直接在前端代码中明文存储完整的API密钥，部署到生产环境时建议通过后端服务做接口代理转发，避免密钥被盗用导致接口配额被刷取。
• 遇到路径类报错时可以先打印完整的请求地址，确认路径拼接是否符合预期，可快速定位这类问题。

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