AnyQuery — Решение проблемы с CORS

📖

Что такое CORS

Механизм и влияние на работу поиска

CORS — это механизм, который позволяет браузерам безопасно запрашивать ресурсы с разных доменов, обходя ограничения политики одинакового источника.

🚫

Если ограничение CORS активно, поиск по изображениям работать не будет.

🔧

Как снять ограничение

Необходимые HTTP-заголовки на стороне сервера с изображениями

Нужно добавить в заголовки ответа от домен_где_лежат_картинки следующие заголовки:

Заголовок	Значение
Access-Control-Allow-Origin	*
Cross-Origin-Resource-Policy	cross-origin

Заголовок

Значение

Access-Control-Allow-Origin

*

Cross-Origin-Resource-Policy

cross-origin

http headers

Access-Control-Allow-Origin: *
Cross-Origin-Resource-Policy: cross-origin

ℹ️

Заголовки добавляются на стороне сервера, где физически хранятся изображения. Это может быть CDN, отдельный медиа-сервер или основной сервер сайта — в зависимости от вашей инфраструктуры.

🧪

Как проверить CORS

Два способа проверки через консоль браузера

🖼️ Метод 1 — через создание тега Image Проверяет сетевые ошибки, CORS и политику

Простейшая проверка загрузки изображения. Вставьте в консоль браузера на нужном сайте, заменив URL на реальный путь к картинке из фида.

javascript — консоль браузера

(() => {
  const url = "https://img.example.ru/image.webp";
  const img = new Image();
  img.crossOrigin = "anonymous";
  img.onload  = () => console.log("IMG loaded (display ok)");
  img.onerror = (e) => console.warn("IMG error (сетевой/политики/CORS):", e);
  img.src = url + ((url.includes("?") ? "&" : "?") + "_t=" + Date.now());
  document.body.appendChild(img);
})();

Ответы консоли

🔴 Проблема сохраняется

Console

⚠ IMG error (сетевой/политики/CORS): Event {type: "error", ...}

🟢 Проблема решена

Console

ℹ IMG loaded (display ok)

📡 Метод 2 — через fetch Проверка нескольких URL одновременно

Позволяет проверить несколько изображений сразу. Замените URLs на реальные адреса картинок из фида.

javascript — консоль браузера

const urls = [
  "https://example.ru/example.png",
  "https://example.ru/example2.png"
];
for (const u of urls) {
  fetch(u, { mode: "cors", credentials: "omit" })
    .then(r => console.log(u, "→", r.status, r.type, "ok:", r.ok))
    .catch(e => console.warn(u, "→ failed:", e.toString()));
}

Ответы консоли

🔴 Проблема сохраняется

Console

⚠ https://example.ru/example.png → failed: TypeError: Failed to fetch

⚠ https://example.ru/example2.png → failed: TypeError: Failed to fetch

🟢 Проблема решена

Console

ℹ https://example.ru/example.png → 200 cors ok: true

ℹ https://example.ru/example2.png → 200 cors ok: true

📊

Сводка: как читать ответы консоли

Быстрая расшифровка результатов проверки

🔴

Проблема сохраняется — если вы видите любое из следующих сообщений:

Console — ошибки

⚠ https://example.ru/example.png → failed: TypeError: Failed to fetch

⚠ IMG error (сетевой/политики/CORS): Event {type: "error", ...}

🟢

Проблема решена — если вы видите следующие сообщения:

Console — успех

ℹ IMG loaded (display ok)

ℹ https://example.ru/example.png → 200 cors ok: true