使用條件HTTP和HTTP路由的前端開發

我目前使用MEAN堆棧進行Web開發。我的問題是如何在同一網站上混合/重定向HTTP和HTTP頁面？使用條件HTTP和HTTP路由的前端開發

對於大多數場景，我使用HTTP協議與後端進行通信。而對於一些網頁我絕對需要使用HTTP（例如/店路線我用IFRAME顯示從其他網站的信息，也可用於一些網頁，我需要HTTP GET從其它API服務供應商。）。看來我無法通過HTTPs設置來實現這些目標。

在某些情況下，我與後端使用HTTPS（如/錢路線）...等通信。顯然你需要涉及金錢的HTTPs。

我的後端有中間件的設置，這樣，如果你使用的HTTP請求/錢它會返回一些錯誤（目前返回301永久移動..）

但我不知道我該怎麼辦着手前端開發。對於Angular部分，我應該只做一些配置，以便在路由包含/錢的情況下，我只需重新加載HTTP中的整個頁面，並且我應該明確確保鏈接看起來像這樣？

<a ng-href="https://www.domain.com/#!/money">money page</a>

但是，這似乎是很多硬編碼對我來說。我的問題是： 1.我在正確的方向思考？
2.它可行嗎？

感謝和任何想法，非常感謝！

來源

2015-05-09 Shih-Min Lee

這裏有幾件事情需要考慮。

首先，是的，當涉及金錢時，您應該始終使用HTTPS。這裏的S代表安全，所以你可以想象這意味着普通的HTTP並不安全。對於普通的HTTP，以純文本形式發送內容，所以任何能夠看到請求的人都可以看到並複製其中的內容。出於這個原因，如果您正在執行諸如發送財務數據，發送密碼/登錄請求，發送私人用戶數據等事情，則應始終確保使用HTTPS。

您還應該記住，您不應該加載HTTP內容在HTTPS頁面上，這會導致瀏覽器警告不安全的內容，甚至直接阻止請求。

無論如何，真正的問題。是的，你的想法是正確的。從HTTP到HTTPS時，您將不得不完全重新加載頁面，但將https硬編碼到任何此類鏈接並不是一個好的解決方案。幸運的是，Angular爲我們提供了decorators指令，可以讓我們對他們的行爲進行調整。你可以使用它來修飾ngHref，以便在滿足某些條件時它自己添加https。

然而裝飾者並不是那麼容易入門的，或者至少他們不是我最後一次閱讀文檔，所以這裏有一個能夠滿足您需要的功能，並且您可以編輯以覆蓋更多的案例：

myApp.config(function($provide) { 
    $provide.decorator('ngHrefDirective', function($delegate) { 
     var original = $delegate[0].compile; 
     $delegate[0].compile = function(element, attrs, transclude) { 
     if(attrs.ngHref.indexOf('money') !== -1) { 
      attrs.ngHref = 'https://example.com/'+attrs.ngHref; 
     } 
     return original(element, attrs, transclude); 
     }; 
     return $delegate; 
    }) 
});

這將採取任何ng-href指令，其中包含單詞money，並更改輸入數據以包含https的完整路徑。它會變成這樣：

<a ng-href="/money">Link that should be re-written</a> 
<a ng-href="/other">Link that should not be re-written</a>

將成爲此：

<a href="https://example.com/money>Money link</a> 
<a href="/other">Link that should not be re-written</a>

來源

2015-05-10 20:30:06

非常有幫助，我從中學到了很多東西。我會去核實細節並儘快回覆。非常感謝！ –

這適用於ng-href鏈接。但是，如果您通過來自其他網站或谷歌的http鏈接引用https頁面，您仍然必須自己重新加載整個頁面纔是正確的？ –

是的，在這種情況下，我會嘗試處理服務器中的重寫。 –

使用條件HTTP和HTTP路由的前端開發

回答

相關問題