ฉันกำลังส่งแบบฟอร์ม (ผ่าน GET ตามที่ต้องการ) ไปยัง crm (ViciDial) ฉันสามารถส่งแบบฟอร์มได้สำเร็จ แต่ถ้าฉันทำเช่นนั้นไฟล์การประมวลผลที่ 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>

แค่ตั้งค่า https ใน URL ก็ใช้ไม่ได้มีวิธีใดบ้างที่ฉันสามารถส่งข้อมูลผ่าน GET และเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าขอบคุณของฉันได้

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

ปัญหาที่นี่คือเนื้อหาผสมซึ่งหมายความว่าฉันโหลดหน้าผ่าน HTTPS และพยายามตีผ่าน AJAX API ที่อยู่ใน HTTP แต่เบราว์เซอร์ไม่อนุญาตให้เราทำเช่นนั้น

ดังนั้นหากคุณไม่สามารถตั้งค่า API ให้เป็น HTTPS ได้ (นี่เป็นกรณีของฉัน) เราก็ยังสามารถใช้วิธีนี้ได้ด้วยวิธีอื่น

ปัญหาหลักไม่ใช่ปัญหาเกี่ยวกับเนื้อหาแบบผสมเนื่องจากฉันต้องการส่งข้อมูลไปยัง API และเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าขอบคุณที่สวยงาม แทนที่จะใช้ AJAX ฉันสร้างไฟล์ php ที่รับข้อมูลส่งโดยใช้ curl ไปยัง API (เนื่องจากกำลังดำเนินการในฝั่งเซิร์ฟเวอร์จึงไม่มีปัญหาเนื้อหาผสม) และเปลี่ยนเส้นทางผู้ใช้ที่มีความสุขของฉันไปยังหน้าขอบคุณแฟนซี

หากคุณโหลดหน้าเว็บในเบราว์เซอร์โดยใช้ HTTPS เบราว์เซอร์จะปฏิเสธที่จะโหลดทรัพยากรใด ๆ ผ่าน HTTP ตามที่คุณได้ลองแล้วการเปลี่ยน URL ของ API ให้มี HTTPS แทน HTTP โดยทั่วไปจะช่วยแก้ปัญหานี้ได้ อย่างไรก็ตาม API ของคุณต้องไม่อนุญาตให้มีการเชื่อมต่อ HTTPS ด้วยเหตุนี้คุณจึงต้องบังคับ HTTP บนหน้าหลักหรือขอให้อนุญาตการเชื่อมต่อ HTTPS

หมายเหตุเกี่ยวกับสิ่งนี้: คำขอจะยังคงใช้งานได้หากคุณไปที่ URL ของ API แทนที่จะพยายามโหลดด้วย AJAX เนื่องจากเบราว์เซอร์ไม่ได้โหลดทรัพยากรจากภายในหน้าที่มีการรักษาความปลอดภัย แต่กลับโหลดหน้าเว็บที่ไม่ปลอดภัยและยอมรับสิ่งนั้น อย่างไรก็ตามเพื่อให้สามารถใช้งานผ่าน AJAX ได้โปรโตคอลควรตรงกัน

ฉันแก้ไขปัญหานี้โดยการเพิ่มโค้ดต่อไปนี้ในหน้า HTML เนื่องจากเราใช้ API ของบุคคลที่สามซึ่งเราไม่ได้ควบคุม

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

หวังว่านี่จะช่วยได้และสำหรับบันทึกเช่นกัน

หากคุณกำลังเยี่ยมชมหน้าเว็บที่คุณไว้วางใจและต้องการก้าวไปข้างหน้าอย่างรวดเร็วเพียงแค่:

1- คลิกไอคอนโล่ที่ด้านขวาสุดของแถบที่อยู่

2- ในหน้าต่างป๊อปอัปคลิก "โหลดต่อไป" หรือ "โหลดสคริปต์ที่ไม่ปลอดภัย" (ขึ้นอยู่กับเวอร์ชัน Chrome ของคุณ)

หากคุณต้องการตั้งค่าเบราว์เซอร์ Chrome เป็นทุกครั้ง (ในทุกหน้าเว็บ) ให้อนุญาตเนื้อหาผสม:

1- ในเบราว์เซอร์ Chrome ที่เปิดอยู่ให้กด Ctrl + Shift + Q บนแป้นพิมพ์เพื่อบังคับปิด Chrome ต้องปิด Chrome อย่างสมบูรณ์ก่อนขั้นตอนถัดไป

2- คลิกขวาที่ไอคอน Google Chrome บนเดสก์ท็อป (หรือลิงก์เมนูเริ่ม) เลือกคุณสมบัติ

3- ในตอนท้ายของข้อมูลที่มีอยู่ในช่อง Target ให้เพิ่ม: "--allow-running-insecure-content" (มีช่องว่างก่อนขีดแรก)

4- คลิกตกลง

5- เปิด Chrome และพยายามเปิดเนื้อหาที่ถูกบล็อกก่อนหน้านี้ ตอนนี้ควรใช้งานได้แล้ว

สาเหตุของข้อผิดพลาดนี้ง่ายมาก AJAX ของคุณพยายามเรียกผ่าน HTTP ในขณะที่เซิร์ฟเวอร์ของคุณกำลังทำงานผ่าน HTTPS ดังนั้นเซิร์ฟเวอร์ของคุณจึงปฏิเสธการเรียก AJAX ของคุณ ซึ่งสามารถแก้ไขได้โดยเพิ่มบรรทัดต่อไปนี้ภายใน head tag ของไฟล์ HTML หลักของคุณ:

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

หากรหัส API ของคุณทำงานบนเซิร์ฟเวอร์node.jsคุณจะต้องให้ความสำคัญกับที่นั่นไม่ใช่ใน Apache หรือ NGINX Mikel พูดถูกการเปลี่ยน URL API เป็น HTTPS คือคำตอบ แต่ถ้า API ของคุณเรียกเซิร์ฟเวอร์ node.js ควรตั้งค่า HTTPS ให้ดีขึ้น! และแน่นอนว่าเซิร์ฟเวอร์ node.js สามารถอยู่บนพอร์ตใดก็ได้ที่ไม่ได้ใช้งานไม่จำเป็นต้องเป็นพอร์ต 443

แทนที่จะใช้วิธี Ajax Post คุณสามารถใช้รูปแบบไดนามิกร่วมกับองค์ประกอบได้ มันจะใช้งานได้แม้เพจจะโหลดใน SSL และแหล่งที่มาที่ส่งไม่ใช่ SSL

คุณต้องกำหนดมูลค่าขององค์ประกอบของรูปแบบ

รูปแบบไดนามิกใหม่จริงจะเปิดเป็นโหมดที่ไม่ใช่ SSL ในแท็บแยกต่างหากของเบราว์เซอร์เมื่อแอตทริบิวต์เป้าหมายตั้งค่า "_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()

ฉันเป็นปัญหาเดียวกัน แต่สำหรับฉันปัญหาคือคำสั่ง ng build ฉันกำลังทำ "ng build --prod" ฉันได้แก้ไขเป็น "ng build --prod --base-href / applicationname /" และสิ่งนี้ช่วยแก้ปัญหาของฉันได้

ในกรณีของฉัน localhost ของฉันคือhttpและเวอร์ชันที่ใช้งานของฉันคือhttpsดังนั้นฉันจึงใช้สคริปต์นี้เพื่อเพิ่มเมตาแท็ก http-equiv สำหรับ 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)
}