Вопрос или проблема
Я создал статический веб-сайт Azure, следуя руководству Microsoft. Все работает, за исключением того, что Azure не возвращает страницу 404.html для запросов HTTP 404.
Мои настройки статического веб-сайта:
Когда я перехожу на страницу, которая не существует, Azure возвращает следующие заголовки:
HTTP/1.1 404 Запрашиваемый контент не существует.
Content-Length: 1214
Content-Type: text/html
Server: Windows-Azure-Web/1.0 Microsoft-HTTPAPI/2.0
x-ms-error-code: WebContentNotFound
x-ms-request-id: 2680e62d-a01e-002a-7d48-de2087000000
x-ms-version: 2018-03-28
Date: Sat, 08 Feb 2020 06:25:27 GMT
Эти заголовки корректны. Но вот что отображается в браузере:
Я проверил, что моя страница 404.html работает нормально, перейдя непосредственно на эту страницу:
Если я использую “Проводник хранилища”, я также могу увидеть, что мой файл 404.html находится в $web:
Тем не менее Azure не возвращает эту страницу для ошибок HTTP 404.
Что я попробовал:
- Разные браузеры (Firefox и Chrome). Получил тот же результат.
- Очистил кэш браузера.
- Загрузил страницу 404.html заново.
- Искал в интернете людей с той же проблемой (не нашел никого).
- Проверил мои настройки статического веб-сайта по нескольким онлайн-руководствам. Кажется, мои настройки верны.
Обновление: Следуя предложению Бирена, я установил уровень доступа контейнера $web на “Container”. После повторной загрузки моих файлов проблема осталась. Но текст в браузере теперь выглядит иначе:
Это заголовки HTTP, возвращаемые для файлов, которые отсутствуют в блобе (не изменились с предыдущего раза и все еще являются корректными 404, насколько я могу судить):
HTTP/1.1 404 Запрашиваемый контент не существует.
Content-Length: 966
Content-Type: text/html
Server: Windows-Azure-Web/1.0 Microsoft-HTTPAPI/2.0
x-ms-error-code: WebContentNotFound
x-ms-request-id: 6bfc762c-b01e-0026-1113-dfb78f000000
x-ms-version: 2018-03-28
Date: Sun, 09 Feb 2020 06:38:03 GMT
Сегодня я сам решил эту проблему. Программное обеспечение, которое я использую для загрузки своего веб-сайта, по умолчанию сжимает каждый файл HTML с помощью Gzip. Это довольно стандартное и правильное поведение. К сожалению, страницы 404 в хранилище Azure Blob не поддерживают кодировку Gzip.
Это ограничение не документировано, хотя здесь есть запрос на обратную связь для кодирования Gzip страниц 404 здесь.
Так что решение простое: при загрузке статического веб-сайта сжимайте все HTML страницы, кроме 404.html. Как только я это сделал, странный текст на страницах 404 исчез, и теперь все работает нормально.
Решение от @Jura сработало для меня. Я использовал статический веб-сайт в хранилище Azure Blob для размещения моего React SPA, который использует react-router для обработки всего клиентского маршрутизации. Однако после сжатия всех активов в процессе сборки Webpack и загрузки их в Azure маршрутизация перестала работать, так как страница 404, которую я настроил на index.html (содержит react-router), не могла быть повторно визуализирована, так как страница 404 в настройках Azure не может быть сжата. Спасибо, @Jura, за указание на этот недостаток в документации.
.
Ответ или решение
Ваш веб-сайт на Azure не возвращает страницу 404.html при возникновении HTTP 404 ошибок. Давайте разберемся в этом вопросе, рассмотрев возможные причины и предлагая решение на основе представленных данных.
Теория (Theory)
Azure Static Website предоставляет возможность развернуть статические веб-сайты, используя Azure Blob Storage. Эта услуга считается одним из самых простых и экономически выгодных вариантов для хостинга статических сайтов. Основное преимущество — это статическая природа контента, что исключает необходимость поддержки серверной логики для обслуживания запросов.
Однако, как показывает ваш случай, определенные нюансы могут возникнуть при настройке. Проблема заключается в том, что Azure Blob Storage по умолчанию не поддерживает сжатие Gzip для страниц ошибки 404. Это может стать причиной того, что большой текст или непонятный набор символов отображается вместо вашей пользовательской 404.html, если эта страница была загружена в сжатом формате.
Пример (Example)
Как описано в вашей ситуации, вместо отображения корректной 404.html, браузер показывает сообщение об ошибке с заголовками, которые включают Content-Type: text/html, но контент страницы отображается некорректно. Один из пользователей также отметил, что сталкивался с аналогичной проблемой при использовании React SPA, где после сжатия всех активов и загрузки их в Azure возникали ошибки с маршрутизацией.
Ваши данные показывают правильность заголовков:
HTTP/1.1 404 The requested content does not exist.
...
x-ms-error-code: WebContentNotFound
...Тем не менее, ваше сообщение в браузере остается некорректным, отражая недокомпрессию или неверное чтение содержимого.
Решение (Application)
Вы правильно идентифицировали основную проблему — Azure Blob Storage не поддерживает Gzip сжатие для 404.html. Решение в данной ситуации довольно простое, но требует немного ручной работы:
-
Проверка настроек: Убедитесь, что ваши настройки веб-сайта на Azure со всеми директивами поняты и приняты. Это включает проверку целевого ресурса для сторожевой страницы и страницы ошибок.
-
Отмена Gzip для
404.html: При загрузке HTML-файлов для вашего статического веб-сайта убедитесь, что заархивированы все файлы, кроме404.html. Это предотвращает проблемы с декомпрессией браузера и позволит корректно обрабатывать запросы на страницы, которых не существует. -
Тестирование и валидация: После того, как вы изменили подход к загрузке файлов, протестируйте ваше решение, зайдя на несуществующие страницы. Это позволит гарантировать, что ошибка исчезла и страницы отображаются корректно.
-
Документация и обновления: Так как это проблема, которая не всегда сразу очевидна, рекомендуется задокументировать данное открытие в ваших собственных пошаговых инструкциях по развертыванию и следить за обновлениями от Azure касательно поддержки Gzip страниц.
Ваш подход поможет не только вам, но и другим, кто сталкивается с такой же проблемой, как это видно из положительных отзывов коллег, которые смогли создать эквивалентные исправления для своих приложений React SPA. Это исправление также указывает на необходимость повышения уровня осведомленности и улучшение документации услуг, предоставляемых Azure.
Таким образом, данный подход решает вашу проблему, и теперь ваш статический сайт на Azure должен корректно отображать страницу 404.html при возникновении ошибок.