刷新后的白标错误页面
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
【讨论】:
以上是关于刷新后的白标错误页面的主要内容,如果未能解决你的问题,请参考以下文章