从外部 API 获取网站图标时出现 CORS 错误

Question

我有一个仅前端的项目，在该项目中我使用 duckduckgo 的第三方 api 来获取给定网站 URL 的图标。现在，每当我们尝试获取假/不存在的主机名的图标时，它都会返回 404 错误并带有默认的后备图标。现在我无法捕捉到返回 404 错误时的确切点。在下面的代码中，

catch

块永远不会被执行，因为API总是返回后备图标。

export const getFaviconLink = (bookmarkLink: string) => {
    try {
        const linkHost = new URL(bookmarkLink).hostname;
        return `https://icons.duckduckgo.com/ip3/${linkHost}.ico`;
    } catch {
        return "https://placehold.co/24/202124/FFF?text=>";
    }
};

上面的实用程序正在我的代码中使用，如下所示

<img src={getFaviconLink(link)} className={styles.favicon} />

我还尝试将

fetch

与 Promise （下面的代码）一起使用，并尝试从前端订阅外部 API，它给了我 CORS 策略错误，这是第三方 API 所期望的。

有什么解决办法吗？或者我是否必须为此创建一个 can 函数？

const fetchFavicon = async () => {
  try {
    const linkHost = new URL(link).hostname;
    const faviconUrl = `https://api.faviconkit.com/${linkHost}/64`;

    const response = await fetch(faviconUrl);

    if (response.ok) {
      setFaviconUrl(faviconUrl);
    } else {
      setFaviconUrl('https://placehold.co/24/202124/FFF?text=>');
    }
  } catch (error) {
    console.error('Network error fetching favicon:', error);
    setFaviconUrl('https://placehold.co/24/202124/FFF?text=>');
  }
};

Answer 1

这肯定不会捕获任何 404 错误：

try {
    const linkHost = new URL(bookmarkLink).hostname;
    return `https://icons.duckduckgo.com/ip3/${linkHost}.ico`;
} catch {
    return "https://placehold.co/24/202124/FFF?text=>";
}

这段代码所做的只是创建一个 URL。 它不会向该 URL 发出任何请求。

但是如果 this 在向结果 URL 发出请求时在运行时产生错误：

<img src={getFaviconLink(link)} className={styles.favicon} />

然后您应该能够使用

onError

事件处理程序观察到该错误。 例如：

<img src={getFaviconLink(link)} className={styles.favicon} onError={handleError} />

并创建一个函数来处理该错误：

const handleError = (e) => {
  // do whatever you need here to handle the error
};