的.htaccess與Angular2強制SSL和修復路由

Question

所以，我有兩個問題，以解決我的NG2的應用程序：

1. 當路由被刷新，我得到一個網頁未找到錯誤
2. 當非SSL路由被訪問我想重新指向SSL。

這修復破碎的路由：

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} -s [OR] 
RewriteCond %{REQUEST_FILENAME} -l [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule ^.*$ - [NC,L] 
RewriteRule ^(.*) /index.html [NC,L] 

這迫使SSL。但是，如果包含上述代碼，則不再有效。

RewriteCond %{HTTPS} off 
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$ 
RewriteCond %{REQUEST_URI} !^/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$ 
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$ 
RewriteRule^https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE] 

如何讓這兩個條件一起工作？

Answer 1

這是我的最終解決方案。

這包括兌現，gzipping等，使您的應用超級快！

#REDIRECT ROUTES TO INDEX (fixes broken routes with angular) 
RewriteEngine on 
RewriteCond %{HTTP:X-Forwarded-Proto} !https 
RewriteCond %{HTTPS} off 
RewriteRule^https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE] 
RewriteCond %{REQUEST_FILENAME} -s [OR] 
RewriteCond %{REQUEST_FILENAME} -l [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule ^.*$ - [NC,L] 
RewriteRule ^(.*) /index.html [NC,L] 
#ENABLE GZIP COMPRESSION TO IMPROVE PERFORMANCE 
AddOutputFilterByType DEFLATE text/plain 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/xml 
AddOutputFilterByType DEFLATE text/css 
AddOutputFilterByType DEFLATE application/xml 
AddOutputFilterByType DEFLATE application/xhtml+xml 
AddOutputFilterByType DEFLATE application/rss+xml 
AddOutputFilterByType DEFLATE application/javascript 
AddOutputFilterByType DEFLATE application/x-javascript 
# SET EXPIRE HEADERS TO IMPROVE PERFORMANCE 
<ifModule mod_expires.c> 
    ExpiresActive On 
    ExpiresDefault "access plus 2 days" 
    ExpiresByType image/x-icon "access plus 1 year" 
    ExpiresByType image/jpeg "access plus 1 year" 
    ExpiresByType image/jpg "access plus 1 year" 
    ExpiresByType image/png "access plus 1 year" 
    ExpiresByType image/gif "access plus 1 year" 
    ExpiresByType application/x-shockwave-flash "access plus 1 month" 
    ExpiresByType text/css "access plus 1 month" 
    ExpiresByType text/javascript "access plus 1 month" 
    ExpiresByType application/pdf "access plus 1 month" 
    ExpiresByType application/javascript "access plus 2 week" 
    ExpiresByType application/x-javascript "access plus 2 week" 
    ExpiresByType text/javascript "access plus 2 week" 
    ExpiresByType text/html "access plus 600 seconds" 
    ExpiresByType application/xhtml+xml "access plus 600 seconds" 
</ifModule> 
# END Expire headers 
# BEGIN Cache-Control Headers 
<ifModule mod_headers.c> 
    <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> 
    Header set Cache-Control "public" 
    </filesMatch> 
    <filesMatch "\.(css)$"> 
    Header set Cache-Control "public" 
    </filesMatch> 
    <filesMatch "\.(js)$"> 
    Header set Cache-Control "public" 
    </filesMatch> 
    <filesMatch "\.(x?html?|php)$"> 
    Header set Cache-Control "private, must-revalidate" 
    </filesMatch> 
</ifModule> 
# END Cache-Control Headers 

Answer 2

我有這個相同的問題，我做了一個解決方法，以便在http上加載頁面時，它只是用http替換http。我知道它不是很優雅，它將頁面加載兩次，但我想分享它。也許有人可以幫助一個純粹的htaccess解決方案。

這是我app.component.ts

import { Location } from '@angular/common'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent implements OnInit { 

    location: Location; 

    ngOnInit() { 
     if (location.protocol === 'http:') { 
      window.location.href = location.href.replace('http', 'https'); 
     } 
    } 
}