刷新后的白标错误页面

Question

我有 Spring Boot 应用程序（后端），而前端我使用的是 Angular 2 单页应用程序。

每当我导航到例如路线时：localhost:8080/getAccounts 并在导航后进行刷新，我都会得到 Whitelabel 错误页面。如果我在根 localhost:8080 我工作正常。问题只出现在子链接中。

返回（使用返回/返回按钮）到上一页也可以正常工作。只是刷新。

我也不能直接调用链接：localhost:8080/getAccounts。首先我必须到主页（localhost:8080）通过子导航栏调用页面。

有人遇到同样的问题吗？我必须改变什么。我的代码：

Main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './components/app.component';
import {HTTP_PROVIDERS};
import {enableProdMode} from '@angular/core';

enableProdMode();
bootstrap(AppComponent, [HTTP_PROVIDERS]);

app.com 组件：

import { Component, OnInit } from '@angular/core';

import { Http } from '@angular/http';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

import { HomeComponent } from './home.component';
import { UserSearchComponent} from './webUserProfiles.component';
import { UserDetailViewComponent} from './webUserProfileView.component'; 

import { HTTPService } from '../service/http.service';


@Component({
  selector: 'app-content',
  templateUrl: './app/templates/app.component.html',
  directives: [ROUTER_DIRECTIVES, AccessErrorComponent],
  providers: [
    ROUTER_PROVIDERS,
    HTTPService
  ]
})

@RouteConfig([
  {
    path: '/',
    name: 'HomeComponent,
    useAsDefault: true
  },
  {
    path: '/user',
    name: 'UserSearch',
    component: UserSearchComponent,
  },
  {
    path: '/user/:id',
    name: 'UserDetailView',
    component: UserDetailViewComponent,
  }
])

export class AppComponent implements OnInit {
    constructor (
    ) { } 
}
}

提前致谢

Answer 1

经过一番研究，我从Thierry Templier找到了这个相当不错的答案

使用路由的默认策略（HTML5 历史 API），您需要一个服务器配置来将您的所有路径重定向到您的 HTML 入口点文件。使用 hashbang 方法就没有必要了……如果你想切换到这种方法，只需使用以下代码：

import { bootstrap } from "angular2/platform/browser";
import { provide } from "angular2/core";
import {
  ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy
} from "angular2/router";

bootstrap(MainApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass:HashLocationStrategy});
]);

您可以查看有关此问题的以下问题：

• When I refresh my website I get a 404. This is with Angular2 and firebase
• PathLocationStrategy vs HashLocationStrategy in web apps
• Is Angular 2's Router broken when using HTML5 routes?

Answer 2

每当我进行刷新时，我的 Angular SPA 上都会出现类似的 WhiteLabel 错误消息。

如果您不想更改应用 URL（如果您使用 HashLocation 策略就会发生这种情况），您可以添加一个新控制器来处理 Spring Boot 应用中的白标错误映射。

解决方法是创建一个实现 ErrorController 的控制器并返回一个转发到 /

的 ModelAndView 对象

@CrossOrigin
@RestController
public class IndexController implements ErrorController {
    
    private static final String PATH = "/error";
    
    @RequestMapping(value = PATH)
    public ModelAndView saveLeadQuery() {           
        return new ModelAndView("forward:/");
    }

    @Override
    public String getErrorPath() {
        return PATH;
    }
}

Answer 3

如果您不想使用 HashLocationStrategy，可以在项目中添加以下控制器：

@Controller
public class UiController {

    @GetMapping("/")
    public String welcome() {
        return "index.html";
    }

    // Match everything without a suffix (so not a static resource)
    @GetMapping(value = {
            "/{path:[^.]*}",
            "/{path:[^.]*}/{path:[^.]*}",
            "/{path:[^.]*}/{path:[^.]*}/{path:[^.]*}",
            "/{path:[^.]*}/{path:[^.]*}/{path:[^.]*}/{path:[^.]*}",
            "/{path:[^.]*}/{path:[^.]*}/{path:[^.]*}/{path:[^.]*}/{path:[^.]*}"
            // add more if required ...
    })
    public String redirect() {
        // Forward to home page so that route is preserved.
        return "forward:/";
    }

}

Answer 4

有一种更好的方法...
您可以实现 WebMvcConfigurer 并添加视图控制器通用路径。
仿效：

包 net.mypackage.config;

导入 org.springframework.context.annotation.Configuration;进口 org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry； 进口 org.springframework.web.servlet.config.annotation.ViewControllerRegistry； 进口 org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration 公共类 MvcConfig 实现 WebMvcConfigurer {

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    String viewName = "forward:/";

    registry.addViewController("/{spring:\\w+}")
            .setViewName(viewName);
    registry.addViewController("/**/{spring:\\w+}")
            .setViewName(viewName);
    registry.addViewController("/{spring:\\w+}/**{spring:?!(\\.js|\\.css)$}")
            .setViewName(viewName);
}

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
}

}

关于麦克瑟：https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/util/AntPathMatcher.html