自定义fetch()函数触发无限递归，导致API被大量请求轰炸

问题根源 #

你的函数出现无限递归调用，导致控制台反复输出“Fire”、API被疯狂请求，核心原因是函数名和浏览器原生fetch API重名了。

当你定义名为fetch的函数后，函数内部调用fetch('https://api.itseternal.net/...')时，调用的不再是浏览器原生的网络请求方法，而是你自己写的这个函数——每执行一次，就会再次触发函数逻辑，形成无限循环，最终导致大量重复请求。

修复方案 #

将函数名改为不与全局API冲突的名称，同时移除无效的请求头，优化代码写法：

function fetchCoverImage() {
    console.log("Fire");
    fetch('https://api.itseternal.net/eternal/stats', {
        mode: "cors",
    })
    .then((result) => result.json())
    .then((api) => {
        const coverUrl = api.song.covers.big;
        document.getElementById('cover').src = coverUrl;
        document.getElementById('body').style.backgroundImage = `url(${coverUrl})`;
    })
    .catch(() => {
        const fallbackUrl = "https://callmehspear.com/cdn/e_black_branding.png";
        document.getElementById('cover').src = fallbackUrl;
        document.getElementById('body').style.backgroundImage = `url(${fallbackUrl})`;
    });
}

关键修改说明 #

• 函数名改为fetchCoverImage，彻底避免覆盖原生fetch方法
• 移除了无效的Access-Control-Allow-Origin请求头：这个是服务器返回的响应头，放在请求里没有任何作用，浏览器会自动处理跨域相关逻辑
• 优化了backgroundImage的赋值方式，用模板字符串替代字符串拼接，代码更简洁
• 提取重复使用的URL变量，减少冗余代码

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