Обычно это вызвано неправильно настроенной обработкой CORS.
Откройте инструменты разработчика браузера. Если есть ошибка, в которой говорится, что Font Awesome не может быть загружен, поскольку он заблокирован политикой CORS, это является причиной.
Для решения этой проблемы необходимо установить заголовок HTTP access-control-allow-origin.
Установка значения на * разрешит любой домен.
access-control-allow-origin: *
Вы можете установить значение заголовка для указанного c домена. Обычно это лучший вариант для файлов, размещенных на определенном c сайте.
access-control-allow-origin: https://www.your-domain.com
Существует два способа установить заголовок CORS. Вы можете создать политику в своей корзине S3 или изменить заголовок, используя функцию Lambda@Edge.
Конфигурация S3
Как добавить документацию CORS
Документация по конфигурации CORS
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>https://www.your-domain.com</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Lambda@Edge Функция
Вы также можете добавить HTTP-заголовок access-control-allow-origin, используя функцию Lambda@Edge. Вероятно, это излишне для того, что вам нужно, но может быть полезно, если есть более сложные настройки.
Для этого вам нужно создать функцию Lambda в US-East-1.
Пример кода, который вы бы использовали, будет выглядеть примерно так ...
exports.handler = async (event, context) => {
const request = event.Records[0].cf.request;
const response = event.Records[0].cf.response;
// Add logic here
let cors = "something";
response.headers['access-control-allow-origin'] = [{ key: 'Access-Control-Allow-Origin', value: cors }];
return response;
};
После создания функции Lambda вы можете добавить ее в свой дистрибутив CloudFront, отредактировав поведение и добавив свою функцию в Связи лямбда-функций как «Ответ зрителя» или «Исходный ответ».
Я бы рекомендовал использовать метод S3 почти во всех ситуациях.