Создание подзаголовков ссылок в стиле Discord в React без проблем с CORS

Введение в проблему

При создании приложений на React часто возникает потребность в отображении подзаголовков ссылок, подобных тем, которые используются в Discord, Twitter или Slack. Однако, при попытке получить данные напрямую из frontend-приложения, возникает проблема с CORS-ошибками. Браузер блокирует запросы к внешним ресурсам, если они не соответствуют политике безопасности.

Решение проблемы

Чтобы обойти эту проблему, необходимо использовать backend-решение для сбора метаданных. Но вместо создания полноценного backend-приложения на Node.js или Puppeteer, можно использовать быстрое и эффективное API-решение. В данном случае мы будем использовать Core Web Utilities API на RapidAPI.

Создание компонента LinkPreview

Целью является создание компонента <LinkPreview url="..." />, который принимает URL и автоматически отображает красивую карточку с названием сайта, описанием и изображением-превью.

Шаг 1: Получение API-ключа

Чтобы получить доступ к API, необходимо зарегистрироваться на сайте RapidAPI и получить бесплатный API-ключ. Для этого нужно перейти на страницу Core Web Utilities API и подписаться на бесплатный тарифный план.

Шаг 2: Создание компонента LinkPreview

Ниже представлен полный код компонента LinkPreview:

import React, { useState, useEffect } from 'react';

const LinkPreview = ({ url }) => {
  const [meta, setMeta] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMetadata = async () => {
      setLoading(true);
      try {
        const response = await fetch(`https://core-web-utilities-api.p.rapidapi.com/v1/metadata?url=${encodeURIComponent(url)}`, {
          method: 'GET',
          headers: {
            'x-rapidapi-key': 'YOUR_RAPIDAPI_KEY_HERE',
            'x-rapidapi-host': 'core-web-utilities-api.p.rapidapi.com'
          }
        });
        const data = await response.json();
        setMeta(data);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };
    fetchMetadata();
  }, [url]);

  if (loading) {
    return <div>Загрузка...</div>;
  }

  if (!meta) {
    return <div>Нет данных</div>;
  }

  return (
    <div>
      <h2>{meta.title}</h2>
      <p>{meta.description}</p>
      <img src={meta.image} alt={meta.title} />
    </div>
  );
};

Обработка изображений

Обратите внимание, что некоторые веб-сайты используют относительные пути для изображений. В этом случае мы используем объект URL для преобразования относительных путей в абсолютные. Если веб-сайт не имеет изображения, мы используем сервис Google для получения скрытого favicon.

Применение компонента LinkPreview

Теперь вы можете использовать компонент LinkPreview в своем приложении, передавая ему URL в качестве свойства:

<LinkPreview url="https://example.com" />

Это позволит вам отображать подзаголовки ссылок в стиле Discord без проблем с CORS-ошибками.