HTTPSページでHTTP AJAX操作を実行しているときに「混在しているコンテンツがブロックされています」

Question

私は（このようにGETを介してGETによって）crm（ViciDial）に送信しているフォームを持っています。私は正常にフォームを提出することができますが、もし私がそれを行うなら、crmの処理ファイルは単に成功のテキストをエコーするだけです。

私のウェブサイトに感謝のページを表示したいので、フォームを送信して必要なページにリダイレクトすることにしましたが、私はこのエラーが発生しましたブラウザ：

混在したコンテンツ： '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にあったAPIをAJAX経由でヒットしようとしていました。しかし、ブラウザは私たちにそれをさせてくれません。

APIをHTTPSに設定できない場合（これは私の場合でした）、まだ別の方法でこれにアプローチできます。

主な問題は、データをAPIに送信し、ユーザーを気の利いたありがとうページにリダイレクトしたかったという混合コンテンツの問題ではありませんでした。 AJAXを使用する代わりに、データを受け取るPHPファイルを作成し、curlを使用してAPIに送信します（これはサーバー側で行われているので、混合コンテンツの問題はありません）。

Answer 1

ブラウザでHTTPSを使用してページを読み込むと、ブラウザはHTTP経由ですべてのリソースの読み込みを拒否します。試したとおり、では、HTTPの代わりにHTTPSを使用するようにAPI URLを変更すると、通常この問題が解決されます。ただし、APIでHTTPS接続を許可してはいけません。このため、メインページにHTTPを強制するか、HTTPS接続を許可するように要求する必要があります。

注：API URLをAJAXで読み込もうとするのではなく、そのURLにアクセスしてもリクエストは機能します。これは、ブラウザが保護されたページ内からリソースをロードしていないため、安全でないページをロードしていて、それを受け入れているためです。しかし、それがAJAXを介して利用できるようにするには、プロトコルが一致する必要があります。

Answer 2

node.jsサーバー上でAPIコードが実行されている場合は、ApacheまたはNGINXではなく、注意を払う必要があります。 Mikelが正しいです、API URLをHTTPSに変更するのは答えですが、APIがnode.jsサーバーを呼び出す場合はHTTPS用に設定するのが良いでしょう！もちろん、node.jsサーバーは未使用のポート上にあれば、ポート443である必要はありません。

Answer 3

Ajax Postメソッドを使用する代わりに、要素とともに動的フォームを使用できます。 これは、偶数ページがSSLで読み込まれ、送信されたソースがSSL以外である場合にも動作します。

フォームの要素の値の値を設定する必要があります。

ターゲット属性が設定されたときに実際に新しいダイナミックなフォームは、ブラウザの別のタブで非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 4

を「_blank」私たちがしているので、私は、HTMLページにこれを追加することでこれを解決Googleが管理していない第三者APIを使用しています。

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

これは役立ちますし、レコードとしても役立ちます。