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を介してページをロードし、HTTPにあるAPIをAJAX経由でヒットしようとしたことを意味します。しかし、ブラウザではそれを行うことはできません。

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

主な問題は、混合コンテンツの問題ではなく、APIにデータを送信して、ユーザーをファンシーなありがとうページにリダイレクトすることでした。AJAXを使用する代わりに、データを受信するphpファイルを作成し、curlを使用してそれをAPIに送信します（これはサーバー側で行われるため、混合コンテンツの問題はありません）。私の幸せなユーザーを豪華なありがとうページにリダイレクトします。

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

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

私たちが制御していないサードパーティのAPIを使用しているため、次のコードをHTMLページに追加することでこれを解決しました。

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

これが参考になることを願っています。

信頼できるWebページにアクセスしているだけで、すばやく前進したい場合は、次のようにします。

1-アドレスバーの右端にある盾アイコンをクリックします。

2-ポップアップウィンドウで、[とにかく読み込む]または[安全でないスクリプトを読み込む]をクリックします（Chromeのバージョンによって異なります）。

Chromeブラウザーを常に（すべてのWebページで）に設定する場合は、混合コンテンツを許可します。

1-開いているChromeブラウザで、キーボードのCtrl + Shift + Qを押してChromeを強制終了します。次の手順の前にChromeを完全に閉じる必要があります。

2- Google Chromeデスクトップアイコン（または[スタートメニュー]リンク）を右クリックします。プロパティを選択します。

3- [Target]フィールドの既存の情報の最後に、「-allow-running-insecure-content」を追加します（最初のダッシュの前にスペースがあります）。

4- [OK]をクリックします。

5- Chromeを開き、以前にブロックされたコンテンツを起動してみます。これで動作するはずです。

このエラーの理由は非常に単純です。サーバーがHTTPSを介して実行されているのに、AJAXがHTTPを介して呼び出そうとしているため、サーバーがAJAXの呼び出しを拒否しています。これは、メインのHTMLファイルのheadタグ内に次の行を追加することで修正できます。

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

APIコードがnode.jsサーバーで実行されている場合は、ApacheやNGINXではなく、そこに注意を向ける必要があります。Mikelは正解です。APIURLをHTTPSに変更することが答えですが、APIがnode.jsサーバーを呼び出している場合は、HTTPS用に設定することをお勧めします。そしてもちろん、node.jsサーバーは未使用の任意のポートに置くことができ、ポート443である必要はありません。

Ajax Postメソッドを使用する代わりに、要素とともに動的フォームを使用できます。ページがSSLでロードされ、送信されたソースが非SSLであっても機能します。

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

ターゲット属性が「_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()

私は同じ問題でしたが、私にとっての問題はng buildコマンドでした。「ng build --prod」を実行していましたが、「ng build --prod --base-href / applicationname /」に修正しました。これで私の問題は解決しました。

私の場合、私の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)
}