刷新后的白标错误页面

Posted

技术标签:

【中文标题】刷新后的白标错误页面【英文标题】:Whitelabel Error Page after refresh 【发布时间】:2016-12-19 05:59:14 【问题描述】:

我有 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 (
    )   


提前致谢

【问题讨论】:

【参考方案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?

【讨论】:

首先感谢您的回答。路由 (Router_providers) 在我的应用程序 app.component 中,而不是在 main.ts 中。在 main.ts 我只有 bootstrap(MyApp, [HTTP_PROVIDERS]);并且没有 ROUTER_PROVIDERS。有什么区别吗? 提醒任何考虑实施此策略的人:如果您打算使用任何服务器端渲染来加快加载时间,角度文档特别警告不要使用散列路由策略。哈希路由会阻止它工作。 angular.io/guide/…【参考方案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;
    

【讨论】:

不错的快捷方式,比在tomcat上设置重写规则更容易 这就像一个魅力!但我无法弄清楚 forward:/ 是如何发生的。在浏览器中检查时,我没有看到并重定向/转发呼叫。同样在我的情况下,当前页面被重新加载而不是加载“/”页面【参考方案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:/";
    


【讨论】:

【参考方案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

【讨论】:

以上是关于刷新后的白标错误页面的主要内容,如果未能解决你的问题,请参考以下文章

在 Spring Boot Web 应用程序中刷新后的 Whitelabel 错误页面

iOS应用程序中的白标字体[关闭]

页面刷新后的 Redux 状态管理

Spring Boot JSP 404:找不到页面

Ajax页面刷新错误

登录laravel后页面刷新时419页面过期错误