Изображения загружаются нормально на вкладке Chrome, но возвращают 403 в коде React

Question

Я работаю над приложением React, которое встраивает изображения с тегом img.И некоторые изображения не загружаются с ошибкой 403:

Тем не менее, он отлично загружается на другой вкладке Chrome:

И это тег изображения после проверки:

Какое решение для этого?

Answer 1

NineBerry верен, но рекомендуется добавить явное разрешение общего доступа к ресурсам общего доступа для заголовков на сервере, на котором размещены изображения (при условии, что вы владеете этим сервером), вместо того, чтобы игнорироватьreferer.

Если у вас нет сервера, на котором размещены изображения, следуйте советам NineBerry относительно законности.

Из документов Mozilla CORS :

Стандарт совместного использования ресурсов между источниками работает путем добавления новых заголовков HTTP, которые позволяют серверам описывать набор источников, которыеразрешено читать эту информацию с помощью веб-браузера.

Answer 2

Сервер проверяет реферер, отправленный браузером, и не возвращает изображение, если реферер находится в другом домене.

Чтобы предотвратить это, во многих современных браузерах вы можете использовать атрибут referrerpolicyтег img, чтобы попросить браузер не отправлять реферера:

<img referrerPolicy="no-referrer" src="https://www.host.net/image.png"  />

• MDN для атрибута referrerpolicy
• Совместимость браузера

Примечание к React: при использовании этого в React я обнаружил, что он работает надежно только тогда, когда атрибут referrerPolicy пишется с большой буквы P и появляется перед атрибутом src.

---

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