การเรียก AJAX ล้มเหลวโดยมีข้อผิดพลาด HTTP/HTTPS เนื้อหาผสม ไม่สามารถบังคับ HTTPS ได้

ฉันมี EC2 instance เดียวที่ทำงานอยู่เบื้องหลัง ELB ซึ่งฉันใช้ AWS Certificate Manager (ACM) เพื่อเปิดใช้งาน HTTPS

ตามที่แนะนำในบางที่ ฉันแมปทั้ง HTTP (พอร์ต 80) และ HTTPS (443) กับ HTTP (พอร์ต 80) ของอินสแตนซ์ของฉัน

ฉันยังเปิดใช้งานการบังคับใช้การเชื่อมต่อที่ปลอดภัยด้วยการเพิ่มบรรทัดเหล่านี้ลงในไฟล์ .htaccess:

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

ทั้งหมดที่ทำงานอย่างสวยงาม ทุกหน้าแสดงเนื้อหาที่ปลอดภัยตามที่คาดไว้ โดยไม่มีคำเตือนในคอนโซลเกี่ยวกับเนื้อหาผสม

เฉพาะในหน้าเว็บที่ฉันโทร AJAX เท่านั้น ฉันพบข้อผิดพลาดเกี่ยวกับเนื้อหาผสมและเฉพาะใน Chrome เท่านั้น FireFox ทำงานตามที่คาดไว้ แต่คอนโซลยังคงแสดงข้อผิดพลาด

ข้อผิดพลาด (FireFox):

นโยบายความปลอดภัยของเนื้อหา: การอัปเกรดคำขอที่ไม่ปลอดภัย 'http://example.com/myapi/get_company/?code=abcd&limit=8' เพื่อใช้ 'https'

ข้อผิดพลาด (Chrome):

เนื้อหาผสม: หน้าที่ 'https://example.com/mypage' ถูกโหลดผ่าน HTTPS แต่ขอให้ จุดสิ้นสุด XMLHttpRequest ที่ไม่ปลอดภัย 'http://example.com/myapi/get_company/?code=abcd&limit=8'. คำขอนี้ถูกบล็อก เนื้อหาจะต้องให้บริการผ่าน HTTPS

ฉันเปิด chrome://net-internals/ และจากสิ่งที่ฉันเห็น มีสองสายที่สายแรกได้รับ HTTP 301 Permanent Redirect และสายที่สองล้มเหลวเนื่องจากการเปลี่ยนเส้นทางชี้ไปที่หน้า HTTP ไม่ใช่ HTTPS

การโทร AJAX มีลักษณะดังนี้:

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

ฉันยังพยายามให้ URL แบบเต็มรวมถึงโปรโตคอลด้วย แต่ก็ไม่ได้สร้างความแตกต่าง