Panggilan AJAX gagal dengan kesalahan HTTP/HTTPS konten campuran, tidak dapat memaksa HTTPS

Saya memiliki satu instans EC2 yang berjalan di belakang ELB, yang mana saya menggunakan AWS Certificate Manager (ACM) untuk mengaktifkan HTTPS.

Seperti yang disarankan di beberapa tempat, saya memetakan HTTP (Port 80) dan HTTPS (443) ke HTTP instance saya (Port 80).

Saya juga mengaktifkan pemaksaan koneksi aman dengan menambahkan baris ini ke file .htaccess:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Semua itu bekerja dengan baik. Semua halaman menampilkan konten aman seperti yang diharapkan, tidak ada peringatan di Konsol tentang konten campuran.

Hanya di halaman tempat saya melakukan panggilan AJAX saya mendapatkan kesalahan tentang konten campuran dan hanya di Chrome. FireFox berfungsi seperti yang diharapkan tetapi Konsol masih menunjukkan kesalahan.

Kesalahan (FireFox):

Kebijakan Keamanan Konten: Meningkatkan permintaan tidak aman 'http://example.com/myapi/get_company/?code=abcd&limit=8' untuk menggunakan 'https'

Kesalahan (Chrome):

Konten Campuran: Laman di 'https://example.com/mypage' dimuat melalui HTTPS, namun meminta titik akhir XMLHttpRequest tidak aman 'http://example.com/myapi/get_company/?code=abcd&limit=8'. Permintaan ini telah diblokir; konten harus disajikan melalui HTTPS.

Saya membuka chrome://net-internals/ dan dari apa yang saya lihat ada dua panggilan yang pertama menerima HTTP 301 Permanent Redirect dan yang kedua gagal karena pengalihan menunjuk ke halaman HTTP, bukan HTTPS.

Panggilan AJAX terlihat seperti ini:

$url = "/myapi/get_company?code=" + e;
apiJson = $.ajax({
    url: $url, 
    dataType: 'json',
    data:{
        limit:8
    },
success: function(data) { //Some code here },
error: function(jqXHR, textStatus, errorThrown) { //Some code here }
});

Saya juga mencoba memberikan URL lengkap termasuk protokolnya tetapi tidak ada bedanya.


person Insider Pro    schedule 19.05.2016    source sumber
comment
Mengapa Anda memerlukan kondisi RewriteCond %{HTTPS} !=on?   -  person Shibashis    schedule 19.05.2016


Jawaban (3)


Perbarui konfigurasi .htaccess

RewriteCond %{HTTPS} !=on --> Tidak diperlukan

perbarui konfigurasi file .htaccess menjadi

RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

Selain mengubah file .htaccess Anda juga perlu memastikan, setelah halaman dimuat menggunakan skema HTTPS, panggilan ajax yang dilakukan dari halaman tersebut tidak boleh menggunakan HTTP. Kesalahan yang Anda lihat adalah kesalahan browser dan terisolasi dari cara elb Anda dikonfigurasi.

person Shibashis    schedule 19.05.2016
comment
sayangnya ini tidak membantu. Tidak ada bedanya sama sekali. Bahkan, saya juga mencoba menghapus ketiga baris tersebut dan tidak ada bedanya jika halaman saat ini sudah ditampilkan di HTTPS. Jika halaman saat ini ditampilkan dalam HTTP dan garis dihapus maka semuanya berfungsi dengan baik. Saya juga tidak berpikir masalahnya ada pada JavaScript. Saya yakin ini ada hubungannya dengan konfigurasi ELB dan cara mengarahkan lalu lintas ke EC2. Saya tidak tahu bagaimana cara mendekatinya. - person Insider Pro; 19.05.2016
comment
Apakah skema hardcoding aplikasi Anda, dalam file js.. Itu harus dibangun secara dinamis menggunakan skema masuk ke server. - person Shibashis; 19.05.2016
comment
Maaf, saya tidak terlalu yakin apa yang Anda maksud dengan skema. Semuanya berfungsi dengan baik jika saya tidak menerapkan HTTPS. - person Insider Pro; 19.05.2016
comment
Setelah halaman dimuat di HTTPS, permintaan Ajax tidak boleh mengirim permintaan ke HTTP..di mana pun Anda beralih dari HTTPS ke browser HTTP akan menimbulkan kesalahan seperti itu. - person Shibashis; 19.05.2016
comment
Terima kasih atas bantuan Anda dalam hal ini, saya sudah mengetahui apa masalahnya, lihat jawaban saya jika Anda penasaran. - person Insider Pro; 20.05.2016

Saya menemukan solusi dan sekarang memposting jawaban atas pertanyaan saya sendiri. Jangan tanya saya bagaimana saya mengetahui hal ini karena saya tidak dapat memberikan jawaban yang pasti, tetapi inilah yang menyebabkannya:

$url = "/myapi/get_company?code=" + e;

diubah menjadi:

$url = "/myapi/get_company/?code=" + e;

Perhatikan garis miring di akhir, tepat sebelum parameter. File sebenarnya yang menangani panggilan AJAX di sisi server ada di sini:

/myapi/get_company/index.php
person Insider Pro    schedule 20.05.2016

Periksa apakah masalahnya ada di server, bukan di klien. Panggilan AJAX Anda ke titik akhir API; apakah titik akhir API tersebut mengembalikan pengalihan HTTP padahal seharusnya mengembalikan pengalihan HTTPS?

person Josh    schedule 05.05.2017