HTML5历史API自动路由刷新错误

我目前正在使用后端使用SpringBoot和前端使用HTML5和Angular 2的项目。HTML5历史API自动路由刷新错误

当我部署的项目，当我浏览的浏览器，直到我按下Reload按钮，一切工作正常。浏览器将显示错误页面。

白色标签错误页面

该应用对/错误没有明确的映射，所以你看到这个作为后备。

周一2008年5月10点16分14秒CDT 2017

有意外的错误（类型=未找到，状态= 404）。

无

此消息显然正在通过使用HTML 5 API历史存储客户端导航在浏览器网址所造成的。

所以，当我开始点击页面上的项目，我看到了URL自动追加本身。

然而，这成为刷新时被击中，充分附加URL发送到因为附加URL中的具体映射不存在不能明白服务器有问题。

有没有修复到这一点，更新服务器端的配置，使任何未知的URL返回根index.html的观点的看法？

例如，当我打刷新，被查询的URL仅仅是根URL http://localhost:8080/root，而不是附加的URL。

这将让浏览器正常浏览，而不是试图做它在服务器端。

来源

2017-05-08 000000000000000000000

“是否有修复此更新服务器端配置，以便任何未知的URL返回根index.html视图的视图？” - 错过了历史API的重点......即使JS完全失败，也可以让URL保持工作状态（并且通过让服务器呈现初始页面而不必加载主页和然后使用Ajax请求运行JS）。如果你不打算将服务器渲染页面作为后备，你也可以使用hashbang URL。 – Quentin

@Quentin谢谢。有没有办法使用SpringBoot来处理它？ – 000000000000000000000

它可能会刷新/加载角度控制器将范围传递给其他缺少的服务/控制器。或者，它可能是一个或多个角度或角度依赖文件在代码执行之前未加载或未呈现。你可以使用ng-cloak。 – geminiousgoel

如果你看看他们的角度教程有一个相关部分"Using Natural Routes"：使用一个简单的Spring MVC控制器，你可以入籍的应用程序中的路由

。所有你需要的是一种枚举服务器中Angular路由的方法。在这里，我们选择通过命名约定来做到这一点：不包含句点（并没有明确已经映射）是角航线的所有路径，并应转发到主页：

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

来源

2017-05-15 17:13:31 dave

我只看到一个写有“forward：/”的空白页面，而不是看到页面。还有什么我失踪？谢谢。 – 000000000000000000000

对于此路由，您处于'@ Controller'而不是'@ RestController'，对吗？ – dave

正确。这很令人费解。 – 000000000000000000000

由于看来你只使用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"; 
    } 

}

但我会建议完全前端从后端分离出来，用的东西，可能是因为Nginx的基本服务的角度应用程序，因为你只需要提供静态文件。SpringBoot似乎有点矫枉过正或不适合这个目的。

这里是一个很好的配置example你可以看看这个目的，这基本上是一个包罗万象的一个index.html

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

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

来源

2017-05-18 05:33:42

**使用ErrorController覆盖的问题：** if没有找到一个文件，而是HTTP 404，现在它返回的索引页面为HTTP 200 ...依赖于HTTP 404的任何内容都会中断 - 就像引用了.css.map文件一样，浏览器通常会忽略它尝试获取地图文件时获取404 ..但如果获取200与索引页面，它会做什么？ _Yeah ... _ – ADTC

切换到散列位置类型会更好。转到你的'environment.js'并将'locationType：'auto''改成'locationType：'hash''。 [关于引用类型的文档在这里。]（https://guides.emberjs.com/v2.18.0/configuring-ember/specifying-url-type/） – ADTC

-1

我认为加上下面一行到你的angular2路线应该工作：

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

当发生错误时，路径被重定向到/error，如Whitelabel Error Page消息所示。

来源

2017-05-18 07:13:38 hakany

其实我以前也遇到同样的问题，运行gulp Serve和Localhost的My Project应该可以正常工作，但是在部署服务器的代码时不会引用它的工作，只要刷新它显示找不到当时我有在主路由给予额外的“＃”像

位置加载中的想法路径假设路径是202.168.09.01/Myproject/myservice 这种路径可以改变像202.168.09.01/ ＃/ Myproject/myservice

所以＃将得到实际总路径的位置

我在Angularjs，Html5中完成了这个问题。

来源

2017-05-21 15:27:59

我认为其他人在使用自然路线的答案中很不错，所以我在这里不会详细讨论。

但回答，为什么您的index.html显示不出来的问题，我想我已经找到了答案here

所以基本上答案解释过关于春季启动这样说：“Spring Boot docs也说：

不要使用src /主/ webapps目录下，如果你的应用将是打包为一个瓶子里。虽然这个目录是一个通用的标准，它只会战争的包装工作，它会默默忽略如果您生成大多数构建工具，则可以使用吃了一个罐子。

当您不尝试抵制违约时，Spring Boot非常有见地，并且效果最好。我没有看到将文件放置在/ src/main/webapp中的任何理由。只需使用/ src/main/resources/static作为您的前端资产。这是最常见的地方。

它将自动从根URI提供这些静态文件，而不需要创建任何根级别的控制器。事实上，您的IndexController会阻止静态前端文件从根URI提供。根本不需要为静态文件创建控制器。

此外，您的应用程序不需要解析器。您的应用程序只是单页面角度应用程序使用的REST API。所以你的HTML模板是在客户端上。如果您正在进行服务器端HTML模板（如使用Thymeleaf或JSP），则需要使用视图解析器。所以删除那件也是。“

我相信你问的是关于使用Spring Boot的问题，经过对它的研究之后，我相信这应该适用于你。

来源

2017-05-22 15:50:03

HTML5历史API自动路由刷新错误

回答

相关问题