引入 ALB 后，發生混合內容錯誤

Question

在一個 EC2 實例前引入 ALB（AWS 上的應用程序負載均衡器）后，Chrome 瀏覽器顯示混合內容錯誤。 （出於安全原因，我稍微編輯了錯誤的內容）

Mixed Content: The page at 'https://www.sample.com/talk' was loaded 
over HTTPS, but requested an insecure EventSource endpoint 
'http://www.sample.com/api/getData?param1=123&param2=456'. This 
request has been blocked; the content must be served over HTTPS.

Pattern1 沒有錯誤。

Pattern2 顯示上述錯誤。 我不知道我的技術堆棧中的問題在哪里。

Pattern1: ALB(443) => EC2(443)
Pattern2: ALB(443) => EC2(80)

我的技術棧：

ALB
Apache 2.4
Laravel 5.7
React 16.9

我嘗試了以下解決方案，但錯誤仍然發生。

1. Laravel 的信任代理。
2. HTTP 從 React 到服務器的請求寫成相對路徑（/api/getData?param1=123&param2=456）所以我將代碼替換為絕對路徑指定協議和域名（ https://www.sample.com/api~ ） .
3. 在 Apache web 服務器中，將 http 改寫為 Z5E056C500A1C4B6A7BADE10B50D8 是個壞主意。

這是一個普遍的問題嗎？

如果您有任何提示，請幫助我。

我為我糟糕的英語感到抱歉。

Answer 1

您遇到的問題與 ALB 無關，它只是一個直通負載均衡器，在一個端口上偵聽並根據您的配置將請求轉發到目標組。

由於內容混合，您的請求被瀏覽器阻止。 如您所知，您需要使用相同的協議來提供內容，或者 HTTPS 或 HTTP。

我能想到的有兩種可能

1. 您的應用程序代碼/配置混淆了內容
2. 或者您的代理服務器（Apache）正在為您的端點切換協議

Answer 2

混合內容錯誤已解決。 我的 Laravel 服務器前端的 http 請求代碼存在問題。

我發現 URL 表示法不合適。 我不知道為什么錯誤的 url 符號會導致混合內容錯誤。

示例 1. url 末尾有一個斜線。

bad:  /api/sample/to/laravel/
good: /api/sample/to/laravel

示例 2. 查詢參數的符號不合適。

bad:  /api/sample/to/laravel/?param1=123
good: /api/sample/to/laravel?param1=123

Answer 3

非常感謝mozukuzuku。 您的解決方案將我引向我的解決方案。 If you have AWS ALB in use and you just end the URL for the IFrame SRC with just the subdir name xxx.com/mmm or xxx.com/mmm/ both with no actual file name on the URL, the browsers will see this as混合內容，因為本身沒有內容，因為沒有文件名。 如果您將 index.asp 或 default.asp 或您的文件名添加到 URL 的末尾，那么瀏覽器會很高興並且混合內容消息會消失（或者它會顯示真正的 CSP 警告等）。 沒有混合內容，AWS ALB 只是返回一個答案，即當未提供文件名時瀏覽器未鏈接。