Одностраничное приложение Angular работает нормально, но возвращает 404 при переходе на любую страницу, кроме основной

#angular #amazon-web-services #amazon-s3 #http-status-code-404 #single-page-application

#angular #amazon-web-services #amazon-s3 #http-status-code-404 #одностраничное приложение

Вопрос:

У меня есть одностраничное веб-приложение, написанное на Angular.

Когда я запускаю его на локальном компьютере с помощью ng serve , оно работает нормально.

При развертывании в корзине в AWS S3 все страницы, кроме главной, возвращают ошибку 404. Другими словами, ошибка 404 возникает при попытке загрузить любой маршрут напрямую.

Например, / возвращает 200 OK but /terms , /register?lang=en , /store — все из которых фактически загружают одно и то же одностраничное приложение — возвращает 404 Not Found .

Хотя код ошибки равен 404, HTML по-прежнему возвращается правильно, и большинство пользователей видят все страницы правильно.

Однако некоторые инструменты тестирования и некоторые мобильные браузеры, похоже, не работают, когда код состояния HTTP равен 404 вместо 200.

Заголовки ответа включают это:

 x-amz-error-code →NoSuchKey
x-amz-error-message →The specified key does not exist.
x-amz-error-detail-Key →register

Что может быть неправильно настроено, что вызывает эту ошибку? Что-то в приложении или что-то в AWS?

1. Если вы используете S3, вы должны указать документ с ошибкой так же, как и ваш индексный документ.

2. Но в документах S3 говорится: When an error occurs, Amazon S3 returns an HTML error document. If you configured your website with a custom error document, Amazon S3 returns that error document. However, some browsers display their own error message when an error occurs, ignoring the error document that Amazon S3 returns. For example, when an HTTP 404 Not Found error occurs, Google Chrome might ignore the error document that Amazon S3 returns and display its own error. — что означает, что все равно будет 404

3. Поскольку S3 является статическим хостом, а у вас есть angular SPA, angular должен отвечать за маршрутизацию и обработку ошибок, поэтому вы всегда должны возвращать index.html файл и пусть angular решает (во внешнем интерфейсе), как обрабатывать URL.

Ответ №1:

У меня была такая же проблема в похожем контексте, и я смог решить ее, создав копию index.html файл, называющий его 404.html

Обновить

404.html Файловый подход решил мою проблему при развертывании приложения Angular на локально установленном Tomcat.

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

 <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
   RewriteRule ^ /index.html
</IfModule>