Как я могу загрузить реальный 404 или 301 с URL-адресом Angular pushstate

Я использую $routeProvider и $locationProvider для обработки URL-адресов pushstate в одностраничном приложении (SPA), что-то вроде этого:

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    });
  })

  .controller('petController', function($scope, petService, $routeParams){
    petService.get('/api/pets/' + $routeParams.petId).success(function(data) {
      $scope.pet = data;
    });
  });

URL-адрес используется для вывода контента с сервера, который может или не может существовать.

Если это был обычный многостраничный веб-сайт, запрос на отсутствие содержимого вызовет ответ заголовка 404 с сервера, и запрос на перемещенный контент вызовет 301. Это предупредит Google о пропавшем или перемещенном содержимом.

Скажем, например, я нахожу URL-адрес следующим образом:

http://example.com/pet/123456

и скажите, что в базе данных нет такого питомца, как мой SPA может вернуть 404 на этот контент.

В противном случае существует ли другой способ правильно предупредить пользователя или поисковую систему о том, что запрошенный URL не существует? Есть ли какое-то другое решение, которое я не рассматриваю?

Ответ 1

Реальный вопрос заключается в том, что http://example.com/pet/123456 вообще ничего не возвращает?

Если ваша начальная точка http://example.com/ и есть ссылка на http://example.com/pet/123456, тогда Angular вызовет petController, который, в свою очередь, вызовет AJAX на http://example.com/api/pet/123456.

Сканер не сделал бы этого, но вместо этого попытался бы вызвать http://example.com/pet/123456 напрямую.

Таким образом, ваш сервер должен иметь возможность обрабатывать этот вызов. Если нет питомца с id 123456, тогда он должен вернуть 404. Проблема решена. Если есть, то он должен вернуть СПА. Затем приложение должно обработать ситуацию.

Ответ 2

В соответствии с этим ответом Как поисковые системы работают с приложениями AngularJS?, вы должны использовать Headless Browser для обработки запросов поисковых роботов и выполнять обратные снимки страницы с помощью соответствующий код ответа. https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

В примере Google не было 301,302 или 404 случаев. Однако их код может быть изменен для анализа содержимого моментального снимка и изменения кода ответа.

Я нашел prerender.io предлагает эту услугу, но это не бесплатно. Однако у них есть бесплатный план, если у вас менее 250 страниц. Prerender спрашивает, что в случае 404 или 301 вы добавляете метатег в DOM.

<meta name="prerender-status-code" content="404">

этот метатег затем обнаруживается их безгласным браузером и изменяется код ответа.

Ответ 3

Попробуйте это

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    }). otherwise({ yourUrl:'/404.html'}) // Render 404 view;
  })