Как можно обойти ошибку CORS при попытке загрузить изображение из CDN Facebook?

Здравствуйте! В веб-интерфейсе на странице присутствуют изображения, и при загрузке возникает следующая ошибка в консоли: 

<pre><code>Access to image at 'https://scontent-ams4-1.cdninstagram.com/v/t51.2885-19/30922409_19258447138…MlIR-0_daudGaR-zzkaILdexQ&amp;oe=6704F484&amp;_nc_sid=6ff7c8?not-from-cache-please' from origin 'https://my-site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</code></pre>

В качестве примера, код для изображения выглядит так: 

<pre><code class="html">&lt;img crossorigin="anonymous" src="https://scontent-ams4-1.cdninstagram.com/v/t51.2885-19/36136305_2024535940911211_7439737458163449856_n.jpg?stp=dst-jpg_e0_s150x150&amp;_nc_ht=scontent-ams4-1.cdninstagram.com&amp;_nc_cat=107&amp;_nc_ohc=0ruGtgqpjJIQ7kNvgFNUjAd&amp;_nc_gid=d1331a44d1db48f196eb48b51c8b36ec&amp;edm=APQMUHMBAAAA&amp;ccb=7-5&amp;oh=00_AYCiyeYrBkmOy6MgJPJivGYkgaL6g3qGjIswEtt9W1-PjQ&amp;oe=6704D8FB&amp;_nc_sid=6ff7c8?not-from-cache-please" alt="" onerror="this.src='/static/img/i.webp';" style="width: 45px; height: 45px" class="rounded-circle"&gt;</code></pre>

Как можно обойти CORS-политику в данной ситуации? 

Заранее спасибо за ваш ответ!
  • 4 октября 2024 г. 8:54
Ответы на вопрос 2
CORS (Cross-Origin Resource Sharing) – это механизм безопасности в браузерах, который ограничивает веб-страницы от выполнения запросов к доменам, отличным от того, с которого была загружена страница. Если сервер не отправляет соответствующие заголовки, браузер блокирует доступ к этим ресурсам.

В вашем случае, для изображения, загружаемого с CDN Facebook, получена ошибка CORS, поскольку сервер не включает заголовок `Access-Control-Allow-Origin`, что ограничивает ваш сайт в доступе к этому изображению.

К сожалению, простых и надежных способов обойти CORS-политику в браузерах не существует, так как это было сделано для обеспечения безопасности. Тем не менее, есть несколько возможных подходов к решению проблемы:

1. **Использование прокси-сервера**: Вы можете настроить свой сервер (или использовать сторонний прокси-сервис), который будет выполнять запрос к ресурсу и добавлять необходимые заголовки CORS. В этом случае вам нужно будет сделать запрос к вашему серверу, а не к CDN напрямую.

   Например, ваш сервер может выглядеть так:
   ```javascript
   const express = require('express');
   const axios = require('axios');
   const app = express();

   app.get('/proxy', async (req, res) => {
       const imageUrl = req.query.url;
       try {
           const response = await axios.get(imageUrl, { responseType: 'arraybuffer' });
           res.set('Access-Control-Allow-Origin', '*');
           res.set('Content-Type', 'image/jpeg');
           res.send(response.data);
       } catch (error) {
           res.status(500).send('Error fetching image');
       }
   });

   app.listen(3000, () => {
       console.log('Server running on port 3000');
   });
   ```
   После настройки прокси, вы сможете делать запрос к своему серверу с указанием URL изображения: `https://my-site.com/proxy?url=<URL_изображения>`.

2. **Изменение подхода к загрузке изображений**: Если у вас есть оригинальные изображения на сервере, вы можете загружать их на свой сервер и раздавать оттуда, что избавит вас от проблемы с CORS.

3. **Использование сторонних CDN**: Некоторые CDN могут предоставлять нужные заголовки и не иметь строгой CORS-политики. Это вариант, если у вас большая потребность в использовании загружаемых изображений.

4. **Обратитесь в поддержку Facebook / Instagram**: В случае, если вы считаете, что доступ к конкретным ресурсам должен быть открыт, можно обратиться к поддержке Facebook / Instagram и запросить, чтобы они добавили заголовки CORS.

Если вышеупомянутые варианты не подходят, то, к сожалению, решение проблемы может быть невозможно в зависимости от конкретного сценария и ограничений безопасности, установленных сервером.
Запрашивать сторонние ресурсы через свой бэк, больше никак.
Похожие вопросы