使用fetch()调用OpenWeatherMap API时出现Failed to fetch错误的解决

云原生阿岚

2026-8-9

错误原因分析及解决办法

可能的错误原因

本地文件协议（file://）限制：直接打开本地HTML文件时，浏览器出于安全策略会严格限制跨域请求，即便API本身支持CORS也会触发请求失败。
浏览器拦截插件：AdBlock、uBlock Origin等广告/隐私拦截插件，可能将OpenWeatherMap的API请求误判为跟踪类请求并拦截。
未处理请求异常：原代码未添加catch捕获Promise异常，导致错误信息缺失，无法定位具体问题。

解决办法

1. 改用本地HTTP服务器运行页面

不要直接打开本地HTML文件，通过本地服务器托管页面以规避file://协议的限制：

Python：在项目目录执行 python -m http.server 8000，之后访问 http://localhost:8000
Node.js：先全局安装http-server（npm install -g http-server），再执行 http-server，访问控制台输出的对应地址
VSCode：安装Live Server插件，右键HTML文件选择"Open with Live Server"

2. 调整浏览器拦截插件设置

暂时禁用广告拦截插件测试请求是否正常。若恢复正常，将api.openweathermap.org添加到插件的白名单列表中。

3. 完善代码的错误处理与配置

修改代码，添加错误捕获逻辑并显式指定CORS模式，同时确保API密钥和URL无拼写错误：

let weather = {
    fetchWeather : function() {
        fetch("https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=01d9f2d66b5fb9c863aa86b5cb001cd2", {
            mode: 'cors'
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error(`HTTP错误！状态码: ${response.status}`);
            }
            return response.json();
        })
        .then((data) => console.log(data))
        .catch((error) => console.error('请求失败详情:', error));
    },
};