我在從AngularJS的URL中刪除'＃'後在頁面重新加載時收到錯誤

我試圖從URL中刪除'＃'。我看了很多例子。幾乎所有的例子都遵循了我遵循的相同的兩個步驟。
步驟1：啓用HTML5模式我在從AngularJS的URL中刪除'＃'後在頁面重新加載時收到錯誤

.config(function ($routeProvider,$locationProvider){ 
$routeProvider 
    .when('/', { 
    templateUrl: 'views/main.html', 
    controller: 'MainCtrl', 
    controllerAs: 'main' 
    }) 
    .when('/products/',{ 
    templateUrl:'views/HomeMain/products.html', 
    controller:'MainCtrl', 
    controllerAs:'main' 
    }); 
$locationProvider.html5Mode(true); 
})

步驟2：添加basetag

<head> 
    <base href="/"> 
</head>

以上以下後提到我成功刪除 '＃' 從URL的步驟。
每當我導航到'產品'頁面的URL看起來像
http://localhost:9001/products/
這正是我想要的。
但是，每當我重新加載頁面的產品，顯示在瀏覽器窗口中此錯誤：

Cannot GET /products/

我爲什麼會收到這個錯誤？我如何處理這個錯誤？

來源

2016-12-15 Chirag

使用#時，您正在瀏覽客戶端，並且網址永遠不會發送到服務器。然而，當你使用html5Mode，你還應該配置服務器端，要重寫的網址，並告訴客戶端將處理它

對於asp.net看到this

來源

2016-12-15 08:37:03

您啓用HTML5模式之前有一個URL像http://localhost:9001/#/products/。請注意，散列的內容絕不會提交給服務器。所以從服務器請求的只是http://localhost:9001。

只要服務器返回響應，並且角度接管控件，它就會看到散列的/products/片段，並作出相應的反應。

啓用HTML5模式後，您的網址將變爲您主頁的http://localhost:9001。然後您訪問產品的路線，這會使您的網址爲http://localhost:9001/products/。請注意，由於HTML5模式使用瀏覽器的歷史記錄API，因此即使URL（而非哈希片段）發生更改，您的頁面也不會完全刷新。

現在，如果刷新頁面，服務器收到的是http://localhost:9001/products/，並且由於此路由未在服務器上處理，它將返回404錯誤。

爲了使這個工作，你需要實現邏輯返回適當的內容，當這條路線被訪問。對於基於節點的應用程序，您可以按照this answer。

來源

2016-12-15 08:54:20 31piy

這是因爲接收請求的Web服務器查找與服務器上的完整URL匹配的資源，該資源不存在，因爲URL的角度部分引用了角應用程序中的路由並需要處理在客戶端瀏覽器中。

如果使用NodeJS/ExpressJS/IIS，則可以進行URL重寫。請參閱此博客的解決方案： http://jasonwatmore.com/post/2016/07/26/angularjs-enable-html5-mode-page-refresh-without-404-errors-in-nodejs-and-iis

來源

2017-04-28 06:13:54 RushabhG

我在從AngularJS的URL中刪除'＃'後在頁面重新加載時收到錯誤

回答

相關問題