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自動路由刷新錯誤

回答

相關問題