Saya memiliki formulir yang saya kirimkan (melalui GET seperti yang diperlukan dengan cara ini) ke crm (ViciDial). Saya berhasil mengirimkan formulir namun jika saya melakukannya, file pemrosesan di crm hanya akan menggemakan teks yang berhasil dan hanya itu.

Alih-alih teks itu, saya ingin menampilkan halaman terima kasih di situs web saya, jadi saya memutuskan untuk menggunakan AJAX untuk mengirimkan formulir dan mengarahkannya ke halaman yang saya butuhkan, namun saya mendapatkan kesalahan ini di browser saya:

Konten Campuran: Halaman di ' https://page.com ' dimuat melalui HTTPS, tetapi meminta titik akhir XMLHttpRequest yang tidak aman ' http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data '. Permintaan ini telah diblokir; konten harus disajikan melalui HTTPS.

Ini adalah skrip AJAX saya:

    <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>

Hanya mengatur https di URL tidak akan berfungsi, adakah cara untuk mengirimkan data melalui GET dan mengarahkan pengguna ke halaman terima kasih saya?

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

Masalah di sini adalah konten campuran, ini berarti saya memuat halaman melalui HTTPS dan mencoba menekan melalui AJAX API yang ada di HTTP. Tapi browser tidak mengizinkan kita melakukan itu.

Jadi, jika Anda tidak dapat menyetel API menjadi HTTPS (ini kasus saya), kami masih dapat melakukan pendekatan ini dengan cara yang berbeda.

Masalah Utama bukanlah masalah konten campuran, tetapi saya ingin mengirimkan data ke API dan mengarahkan pengguna ke halaman terima kasih yang mewah. Alih-alih menggunakan AJAX, saya membuat file php yang menerima data mengirimkannya menggunakan curl ke API (karena ini dilakukan di sisi server tidak ada masalah konten campuran) dan mengarahkan pengguna saya yang bahagia ke halaman terima kasih yang mewah.

Jika Anda memuat halaman di browser Anda menggunakan HTTPS, browser akan menolak untuk memuat sumber daya apa pun melalui HTTP. Seperti yang Anda coba, mengubah URL API menjadi HTTPS dan bukan HTTP biasanya menyelesaikan masalah ini . Namun, API Anda tidak boleh mengizinkan koneksi HTTPS. Karena itu, Anda harus memaksa HTTP di halaman utama atau meminta mereka mengizinkan koneksi HTTPS.

Catatan tentang ini: Permintaan akan tetap berfungsi jika Anda membuka URL API alih-alih mencoba memuatnya dengan AJAX. Ini karena browser tidak memuat sumber daya dari dalam halaman aman, melainkan memuat halaman yang tidak aman dan menerimanya. Namun, agar tersedia melalui AJAX, protokolnya harus cocok.

Saya menyelesaikan ini dengan menambahkan kode berikut ke halaman HTML, karena kami menggunakan API pihak ketiga yang tidak dikontrol oleh kami.

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

Semoga ini bisa membantu, dan sebagai catatan juga.

Jika Anda baru saja mengunjungi laman web yang Anda percaya dan ingin maju cepat, cukup:

1- Klik ikon perisai di ujung kanan bilah alamat.

2- Di jendela pop-up, klik "Tetap muat" atau "Muat skrip yang tidak aman" (bergantung pada versi Chrome Anda).

Jika Anda ingin menyetel browser Chrome Anda ke SELALU (di semua halaman web) izinkan konten campuran:

1- Di browser Chrome yang terbuka, tekan Ctrl + Shift + Q pada keyboard Anda untuk menutup paksa Chrome. Chrome harus ditutup sepenuhnya sebelum langkah selanjutnya.

2- Klik kanan ikon desktop Google Chrome (atau tautan Start Menu). Pilih Properties.

3- Di akhir informasi yang ada di bidang Target, tambahkan: "--allow-running-insecure-content" (Ada spasi sebelum tanda hubung pertama.)

4- Klik OK.

5- Buka Chrome dan coba luncurkan konten yang diblokir sebelumnya. Ini harus bekerja sekarang.

Alasan kesalahan ini sangat sederhana. AJAX Anda mencoba memanggil melalui HTTP sedangkan server Anda berjalan melalui HTTPS, sehingga server Anda menolak memanggil AJAX Anda. Ini dapat diperbaiki dengan menambahkan baris berikut di dalam tag head file HTML utama Anda:

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

Jika kode API Anda berjalan di server node.js maka Anda perlu memfokuskan perhatian Anda di sana, bukan di Apache atau NGINX. Mikel benar, mengubah URL API menjadi HTTPS adalah jawabannya, tetapi jika API Anda memanggil server node.js, sebaiknya disiapkan untuk HTTPS! Dan tentu saja, server node.js dapat berada di port mana pun yang tidak digunakan, tidak harus port 443.

Daripada menggunakan metode Ajax Post, Anda dapat menggunakan bentuk dinamis bersama dengan elemen. Ini akan bekerja bahkan halaman dimuat dalam SSL dan sumber yang dikirimkan adalah non SSL.

Anda perlu mengatur nilai nilai elemen formulir.

Sebenarnya bentuk dinamis baru akan terbuka sebagai mode non SSL di tab terpisah di Browser ketika atribut target telah disetel '_blank'

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()

Saya masalah yang sama, tapi bagi saya masalahnya ng build command. Saya melakukan "ng build --prod" saya telah mengoreksinya menjadi "ng build --prod --base-href / applicationname /". dan ini memecahkan masalah saya.

dalam kasus saya, localhost saya adalah httpdan versi yang saya terapkan adalah https, jadi saya menggunakan skrip ini untuk menambahkan tag meta http-equiv hanya untuk https:

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)
}