在 HTTPS 頁面中運行 HTTP AJAX 操作時出現“混合內容被阻止”

Question

我有一個要提交給 crm (ViciDial) 的表格（通過 GET，因為它需要這種方式）。 我可以成功提交表單，但是如果我這樣做，crm 上的處理文件將只回顯成功文本，僅此而已。

我想在我的網站上顯示感謝頁面而不是該文本，因此我決定使用 AJAX 提交表單並將其重定向到我需要的頁面，但是我的瀏覽器出現此錯誤：

混合內容：“https://page.com”的頁面已通過 HTTPS 加載，但請求了不安全的 XMLHttpRequest 端點“http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data” '. 此請求已被阻止； 內容必須通過 HTTPS 提供。

這是我的 AJAX 腳本：

<script>
SubmitFormClickToCall = function(){
            
    jQuery.ajax({
        url: "http://XX.XXX.XX.XX/vicidial/non_agent_api.php",
        data : jQuery("#form-click-to-call").serialize(),
        type : "GET",
        processData: false,
        contentType: false,
        success: function(data){
            window.location.href = "https://www.example.com/thank-you";
        }
    });
}
</script>

僅在 URL 中設置 https 是行不通的，有什么方法可以通過 GET 提交數據並將用戶重定向到我的謝謝頁面？

============================

這里的問題是混合內容，這意味着我通過 HTTPS 加載了一個頁面，並試圖通過 AJAX 和 HTTP 中的 API 進行訪問。但是瀏覽器不允許我們這樣做。

因此，如果您不能將 API 設置為 HTTPS（這是我的情況），我們仍然可以采用不同的方式來解決這個問題。

主要問題不是混合內容問題，而是我想將數據提交到 API 並將用戶重定向到花哨的感謝頁面。 我沒有使用 AJAX，而是制作了一個 php 文件，該文件接收數據，使用 curl 將其發送到 API（因為這是在服務器端完成的，所以沒有混合內容問題），並將我的快樂用戶重定向到一個精美的感謝頁面。

Answer 1

我通過向 HTML 頁面添加以下代碼解決了這個問題，因為我們使用的是不受我們控制的第三方 API。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

希望這會有所幫助，並為記錄。

Answer 2

如果您使用 HTTPS 在瀏覽器中加載頁面，瀏覽器將拒絕通過 HTTP 加載任何資源。 正如您所嘗試的那樣，將 API URL 更改為使用 HTTPS 而不是 HTTP 通常可以解決此問題。 但是，您的 API 不得允許 HTTPS 連接。 因此，您必須在主頁上強制使用 HTTP 或請求它們允許 HTTPS 連接。

請注意：如果您轉到 API URL 而不是嘗試使用 AJAX 加載它，該請求仍然有效。 這是因為瀏覽器不是從安全頁面中加載資源，而是加載不安全頁面並接受它。 但是，為了通過 AJAX 使用它，協議應該匹配。

Answer 3

如果您只是在訪問您信任的網頁並且想要快速前進，只需：

1- 單擊地址欄最右側的盾牌圖標。

2- 在彈出窗口中，單擊“仍然加載”或“加載不安全的腳本”（取決於您的 Chrome 版本）。

---

如果要將 Chrome 瀏覽器設置為始終（在所有網頁中）允許混合內容：

1- 在打開的 Chrome 瀏覽器中，按鍵盤上的 Ctrl+Shift+Q 強制關閉 Chrome。 在下一步之前必須完全關閉 Chrome。

2- 右鍵單擊​​ Google Chrome 桌面圖標（或開始菜單鏈接）。 選擇屬性。

3- 在目標字段中現有信息的末尾，添加：“--allow-running-insecure-content”（第一個破折號前有一個空格。）

4- 單擊確定。

5- 打開 Chrome 並嘗試啟動之前被阻止的內容。 它現在應該可以工作了。

Answer 4

這個錯誤的原因很簡單。 您的 AJAX 試圖通過 HTTP 調用，而您的服務器通過 HTTPS 運行，因此您的服務器拒絕調用您的 AJAX。 這可以通過在主 HTML 文件的 head 標記中添加以下行來解決：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

Answer 5

上面 Mikel 的回答是正確的； 它與HTTPS的前端和HTTP的后端相關； 因此，在您的后端安裝 SSL 證書。

在我的 chrome 瀏覽器上測試期間解決這個問題； 我將所需站點的 chrome 設置更改為不安全的內容，如下圖所示

1- 單擊儲物櫃圖標並選擇站點設置

2- 在不安全的內容中將其從阻止更改為允許。

Answer 6

我在 Vue-CLI 應用程序中遇到了與 Axios 請求相同的問題。 在 Chrome 的網絡選項卡中進一步檢查時，我發現 axios 的請求 URL 正確具有https但響應 'location' 標頭是http 。

這是由nginx引起的，我通過將這兩行添加到 nginx 的服務器配置來修復它：

server {
    ...
    add_header Strict-Transport-Security "max-age=31536000" always;
    add_header Content-Security-Policy upgrade-insecure-requests;
    ...
}

可能無關緊要，但我的 Vue-CLI 應用程序是在 nginx 的子路徑下提供的，配置如下：

location ^~ /admin {
        alias   /home/user/apps/app_admin/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Host $host;
}

Answer 7

如果您的 API 代碼在node.js服務器上運行，那么您需要將注意力集中在那里，而不是在 Apache 或 NGINX 中。 Mikel 是對的，將 API URL 更改為 HTTPS 是答案，但是如果您的 API 正在調用 node.js 服務器，最好設置為 HTTPS！ 當然，node.js 服務器可以在任何未使用的端口上，不必是端口 443。

Answer 8

您可以將動態表單與元素一起使用，而不是使用 Ajax Post 方法。 即使頁面在 SSL 中加載並且提交的源是非 SSL，它也能工作。

您需要設置表單元素的值。

實際上，當目標屬性設置為“_blank”時，新的動態表單將在瀏覽器的單獨選項卡中以非 SSL 模式打開

var f = document.createElement('form');
f.action='http://XX.XXX.XX.XX/vicidial/non_agent_api.php';
f.method='POST';
//f.target='_blank';
//f.enctype="multipart/form-data"

var k=document.createElement('input');
k.type='hidden';k.name='CustomerID';
k.value='7299';
f.appendChild(k);



//var z=document.getElementById("FileNameId")
//z.setAttribute("name", "IDProof");
//z.setAttribute("id", "IDProof");
//f.appendChild(z);

document.body.appendChild(f);
f.submit()

Answer 9

就我而言，我的 localhost 是http而我部署的版本是https ，所以我使用這個腳本為 https 添加 http-equiv 元標記：

if (window.location.protocol.indexOf('https') == 0){
  var el = document.createElement('meta')
  el.setAttribute('http-equiv', 'Content-Security-Policy')
  el.setAttribute('content', 'upgrade-insecure-requests')
  document.head.append(el)
}

Answer 10

我是同樣的問題，但對我來說問題是 ng build 命令。 我正在做“ng build --prod”，我已將其更正為“ng build --prod --base-href /applicationname/”。 這解決了我的問題。

Answer 11

這個解決方案對我很好

只需添加到頭部

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

Answer 12

我想分享一個對我來說觸發混合內容問題的小怪事。 我正在使用 DataTables 並提供一個 AJAX url 看起來像這樣：

mypath/ajax_get/'.$clientID

這是在 PHP 中設置的，但並不總是設置$clientID 。 因此，當 Datatables 代碼運行時，它只是結束了ajax_get/ 。 由於某些未知原因，這足以繞過 https 並嘗試加載 http。 我不認為這是一個瀏覽器錯誤，因為我在 Chrome 和 Firefox 中嘗試過，但如果您遇到問題，我希望這會有所幫助。

與 html/調試一樣，如果有疑問，請創建一個重復頁面並剝離代碼塊，直到您可以查明問題所在！

Answer 13

對於本地的 laravel 8 沒問題，但在生產中我遇到了問題。 為了解決這個問題，我使用了 POST 方法並在 url 的末尾刪除了一個簡單的斜杠。 我把它從：

/我的/網址/

到：

/我的/網址

它有效。

我不知道原因。 也許有人可以解釋一下。