Ошибка обновления автоматической маршрутизации API API истории HTML5

В настоящее время я работаю над проектом с использованием SpringBoot на бэкэнд и HTML5 и Angular 2 во внешнем интерфейсе.

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

Страница ошибки Whitelabel

Это приложение не имеет явного сопоставления для /error, поэтому вы видите это как резерв.

Пн Май 08 10:16:14 CDT 2017

Появилась непредвиденная ошибка (type = Not Found, status = 404).

Нет доступных сообщений

Это, по-видимому, вызвано использованием API истории HTML 5 для хранения клиентской навигации в URL-адресе браузера.

Поэтому, когда я начинаю нажимать на элементы на странице, я вижу, что URL-адрес автоматически добавляет себя.

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

Есть ли исправление к этому, которое обновляет конфигурацию на стороне сервера, чтобы любой неизвестный URL-адрес возвращал представление корневого представления index.html?

Например, когда я нажимаю обновление, запрашиваемый URL-адрес - это просто корневой URL http://localhost:8080/root, а не добавленный URL.

Это позволит браузеру правильно перемещаться, а не пытаться сделать это на стороне сервера.

Ответ 1

Поскольку кажется, что вы используете SpringBoot только в качестве бэкэнд, вы можете либо перенаправить все свои запросы на index.html

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

  @Controller
  static class Routes {

    @RequestMapping(value = "/**", method = RequestMethod.GET)
    public String index() {
      return "index.html";
    }

  }

}

Или переопределите ErrorController, чтобы поймать /error, который вы видите и перенаправляете на свой индекс вместо

import org.springframework.boot.autoconfigure.web.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class OverrideController implements ErrorController {

  @RequestMapping("/error")
  public String index() {
    return "index.html";
  }

  @Override
  public String getErrorPath() {
    return "index.html";
  }

}

Но я бы рекомендовал полностью отделить интерфейс от бэкэнд, отслужив ваше приложение angular с чем-то, что может быть таким же простым, как Nginx, поскольку вам просто нужно обслуживать статические файлы. SpringBoot кажется немного излишним или не подходит для этой цели.

Вот хорошая конфигурация пример, которую вы могли бы изучить в этой цели, что в основном является уловкой всего index.html

server {
  server_name yoursite.com;
  root /usr/share/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Ответ 2

Если вы посмотрите на их учебник angular, вы найдете соответствующий раздел "Использование естественных маршрутов" :

с помощью простого контроллера Spring MVC вы можете натурализовать маршруты в своем приложении. Все, что вам нужно, это перечислить маршруты angular на сервере. Здесь мы выбираем это с помощью соглашения об именах: все пути, которые не содержат период (и явно не отображаются), являются angular маршрутами и должны пересылаться на главную страницу:

@Controller
public class SpaController {
    @RequestMapping(value = "/{[path:[^\\.]*}")
    public String redirect() {
        return "forward:/";
    }
}

Ответ 3

На самом деле, я также получаю ту же самую проблему ранее, мой проект, работающий с gulp Служить и в Localhost должен работать, но при развертывании кода на сервере без вывода его работы после его обновления он показывает, что не найден путь в момент времени У меня есть идея, связанная с загрузкой местоположения при основной маршрутизации, дающей дополнительные "#" Как

предположим, что путь 202.168.09.01/Myproject/myservice этот вид пути может быть изменен как 202.168.09.01/#/Myproject/myservice

Итак # будет получать фактический полный путь к местоположению

У меня проблема: в Angularjs, Html5.

Ответ 4

Я думаю, что другие очень хорошо разбираются в своих ответах, которые используют естественные маршруты, поэтому я не буду вдаваться в подробности.

Но чтобы ответить на вопрос, почему ваш index.html не отображается, я думаю, что нашел ответ здесь

Таким образом, в основном ответ объяснил это так в отношении Spring Boot: " Spring Загрузочные документы также говорит:

Не используйте каталог src/main/webapp, если ваше приложение будет упакован как банку. Хотя этот каталог является общим стандартом, он будет работать только с военной упаковкой, и она будет молча игнорироваться большинство инструментов сборки, если вы создаете банку.

Spring Загрузка очень самоуверенная и работает лучше всего, когда вы не пытаетесь противостоять дефолтам. Я не вижу причин, чтобы ваши файлы помещались в /src/main/webapp. Просто используйте /src/main/resources/static для своих интерфейсных активов. Это наиболее распространенное место.

Он будет обслуживать эти статические файлы из корневого URI автоматически, без необходимости создавать контроллер уровня корневого уровня. Фактически, ваш IndexController предотвратит использование статических интерфейсных файлов из корневого URI. Нет необходимости создавать контроллер для статических файлов вообще.

Кроме того, просмотр объявления не требуется для вашего приложения. Ваше приложение - это только API REST, потребляемый одностраничным приложением angular. Таким образом, ваш шаблон HTML находится на клиенте. Просмотр разрешителей необходим, если вы используете шаблоны HTML на стороне сервера (например, с Thymeleaf или JSP). Так что удалите эту часть. "

Я считаю, что вы спрашивали об использовании Spring Boot, и после исследования по этому вопросу я считаю, что это должно быть применено к вам.

Ответ 5

Я думаю, что добавление следующей строки в ваш маршрут angular2 должно работать:

{ path: '/error', redirectTo: '/root', pathMatch: 'full' }

При возникновении ошибки путь перенаправляется на /error, как показано в сообщении Whitelabel Error Page.