天气App出现fetch NetworkError（NS_BINDING_ABORTED）问题求助

问题根源 #

你遇到的NS_BINDING_ABORTED和fetch网络错误，核心原因是form元素的默认提交行为中断了fetch请求：

• 当在form内触发提交（比如回车、点击提交按钮），浏览器会默认发起表单提交的HTTP请求并刷新页面，这个过程会直接中止正在进行的fetch调用，导致请求失败。
• 你之前修改CSS只是巧合，问题本质是form的默认行为未被处理，恢复CSS后该行为依然存在，所以问题没解决；换成div后没有默认提交行为，fetch请求能正常完成。

解决方法 #

只需在form的提交事件中阻止默认行为，就能保留form的回车提交功能，同时让fetch正常执行：

// 获取form元素
const weatherForm = document.querySelector('form');

// 监听form的submit事件
weatherForm.addEventListener('submit', (e) => {
    // 阻止浏览器默认的表单提交行为
    e.preventDefault();
    
    // 执行你的fetch逻辑
    const apiKey = '你的API密钥';
    const query = '目标城市';
    const url = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${query}`;
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // 处理返回的天气数据
            console.log(data);
        })
        .catch(err => {
            console.error('请求失败:', err);
        });
});

额外注意点 #

• 如果使用<button>作为提交按钮，需确保它的type属性设为button（即<button type="button">），否则浏览器会默认将其识别为提交按钮，触发form的默认行为；如果用<input type="submit">，则必须通过e.preventDefault()阻止默认行为。

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