使用Angular JS配置Amazon S3靜態網站ui.router頁面刷新時的html5Mode（true）

如何配置Amazon S3靜態網頁以正確路由Angular ui.router html5Mode路由？在頁面刷新時，它將請求一個不存在的文件，而angular無法處理它。在文檔中，他們建議在服務器上更改URL重寫。使用Angular JS配置Amazon S3靜態網站ui.router頁面刷新時的html5Mode（true）

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

然而，S3是存儲，並且不提供相同的重定向選項我一直在嘗試使用內置的重定向規則如

<RoutingRules> 
    <RoutingRule> 
     <Condition> 
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals > 
     </Condition> 
     <Redirect> 
      <HostName>[[ your application's domain name ]]</HostName> 
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith> 
     </Redirect> 
    </RoutingRule> 
</RoutingRules>

然而，這只是導致重定向循環。

有什麼建議嗎？

來源

2015-01-21 Tui Popenoe

是什麼發出請求（例如），並在那裏是實際的文件（例如）？ – dnozay 2015-01-25 17:40:13

http://stackoverflow.com/a/16877231/ – dnozay 2015-01-25 17:55:23

上面的解決方案應該可以工作，這就是我使用的 – Karl 2015-11-18 21:12:09

基本上有3個選項，使用EC2實例來執行實際服務器重寫到配置的HTML5路由，或者像dnozay建議的那樣，使用回退模式並重寫請求以使用＃！ hashbang。最後，你可以使用標準的角度路線，這是我選擇的選項。減少麻煩，當Angular 2.0滾動時，你可以更新到那個。

https://stackoverflow.com/a/16877231/1733117

並沒有真正解決這裏的路由問題。

來源

2015-02-09 00:33:29

在Frequently Asked Questions，他們重寫幾乎所有服務index.html頁面。對於HTML5 fallback mode，您需要使用#!/（hashbang）。

你可以改變這一點：

<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>

對這個答案

<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>

您可能還需要配置您的應用程序使用前綴：

angular.module(...) 

... 

.config(function($locationProvider) { 
    $locationProvider.html5Mode(true).hashPrefix('!'); 
})

來源

2015-01-25 17:54:47 dnozay

您還需要設置'$ locationProvider.hashPrefix（'！'）;' – Hamms 2015-01-26 23:46:54

這裏是使用nginx的proxy_pass另一種選擇，它也可以讓你有多個項目的子文件夾和使用子域名

S3 Static Website Hosting Route All Paths to Index.html

來源

2016-05-23 05:44:23

請確保您有配置爲您的網站索引的路線。主要是index.html 從S3配置中刪除路由規則將Cloudfront放在您的S3存儲桶前。爲您的Cloudfront實例配置錯誤頁面規則。

在錯誤的規則規定：

Http error code: 404 (and 403 or other errors as per need) 
Error Caching Minimum TTL (seconds) : 0 
Customize response: Yes 
Response Page Path : /index.html 
HTTP Response Code: 200

來源

2017-08-09 23:28:27 Legman

使用Angular JS配置Amazon S3靜態網站ui.router頁面刷新時的html5Mode（true）

回答

相關問題