it-swarm.com.ru

AngularJS и обработка ошибок 404

Каков наилучший способ обслуживать 404 с помощью приложения AngularJS?

Немного предыстории: я создаю приложение Angular и решил использовать

$locationProvider.html5Mode(true);

потому что я хочу, чтобы URL выглядели естественными (и неотличимыми от многостраничного «традиционного» веб-приложения).

На стороне сервера (простое приложение Python Flask) у меня есть универсальный обработчик, который перенаправляет все в угловое приложение:

@app.route('/', defaults={'path': ''})
@app.route('/<path>')
def index(path):
    return make_response(open('Ang/templates/index.html').read())

Теперь я пытаюсь понять, что делать с ошибками 404. Большинство приложений Angular, которые я видел, делают следующее:

.otherwise({ redirectTo: '/' })

а это значит, что они никак не могут подать правильный 404.

Тем не менее, я бы предпочел вернуть правильное 404 с кодом состояния 404 (в основном для целей SEO).

Каков наилучший способ справиться с 404 с помощью Angular? Должен ли я не беспокоиться об этом и придерживаться всеобъемлющего? Или я должен убрать ловушку и обслуживать правильные 404 на стороне сервера?

отредактировано для ясности

42
Ryan

Немного поиграв, а также немного пообщавшись с Мигелем, я собрал несколько разных решений:

  1. Просто используйте универсальный подход и не беспокойтесь о правильных 404-х. Это можно настроить с помощью кода на стороне сервера (как в моем первоначальном решении) или, лучше, с перезаписью URL на вашем веб-сервере.
  2. Зарезервируйте определенный раздел вашего сайта для своего углового приложения (например, /app). Для этого раздела настройте всеохватывающее и не беспокойтесь о правильных 404-х. Ваши другие страницы будут обслуживаться как обычные страницы, и посещение любого недействительного URL, который не начинается с /app, приведет к правильным 404.
  3. Постоянно следите за тем, чтобы все ваши маршруты в app.js были отражены в вашем коде на стороне сервера (да, довольно раздражающе), где вы будете использовать эти маршруты для своего углового приложения. Все остальные маршруты будут 404.

Постскриптум Второй вариант - мой личный фаворит. Я попробовал это, и это работает довольно хорошо.

17
Ryan

Я думаю, что вы путаете маршруты Flask с маршрутами Angular.

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

На Angular стороне действительно нет HTTP-транзакции, потому что вся внутренняя маршрутизация в приложении происходит на клиенте, даже если сервер не знает об этом. Это может быть частью вашей путаницы, угловые ссылки обрабатываются полностью в клиенте без каких-либо запросов к серверу, даже в html5mode, поэтому в этом контексте нет концепции ошибки 404, просто потому, что нет участия сервера. Угловая ссылка, которая отправляет вас по неизвестному маршруту, просто попадет в предложение otherwise. Здесь нужно либо отобразить сообщение об ошибке (если пользователь должен знать об этом условии и может что-то с ним сделать), либо просто проигнорировать неизвестный маршрут, как это делает redirectTo: '/'.

Это не похоже на ваш случай, но если в дополнение к обслуживанию приложения Angular ваш сервер реализовал API, который Angular может использовать во время работы, то Angular может получить 404 от Flask, если он сделал асинхронный запрос к этому API с использованием Неверная ссылка. Но вы бы не хотели показывать пользователю страницу с ошибкой 404, если это произошло, поскольку запрос был внутренним для приложения и не был инициирован пользователем напрямую.

Надеюсь, это поможет прояснить ситуацию!

32
Miguel

Это старая ветка, но я перебираю ее в поисках ответа.

Добавьте это в конец вашего appRoutes.js и создайте представление 404.html.

.when('/404', {
    templateUrl: 'views/404.html',
    controller: 'MainController'
})

.otherwise({ redirectTo: '/404' })
2
Russ

Я думаю, что настоящий http 404 будет довольно бесполезным «для целей SEO», если вы не предоставляете полезный контент не-javascript для реальных страниц вашего сайта. Поисковый индексатор вряд ли сможет сделать ваш угловой сайт для индексации.

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

0
rjmunro