"Смешанный контент заблокирован" при выполнении операции HTTP AJAX на странице HTTPS
У меня есть форма, которую я отправляю (через GET, как это требуется таким образом) в crm (вспомогательный). Я могу успешно отправить форму, однако, если я сделаю это, файл обработки в 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 (поскольку это делается на стороне сервера, нет проблем со смешанным контентом) и перенаправляет моего счастливого пользователя на необычную страницу благодарности.
4 answers
Если вы загружаете страницу в свой браузер по протоколу HTTPS, браузер откажется загружать какие-либо ресурсы по протоколу HTTP. Как вы уже пробовали, изменение URL-адреса API на HTTPS вместо HTTP обычно решает эту проблему. Однако ваш API не должен разрешать HTTPS-соединения. Из-за этого вы должны либо принудительно включить HTTP на главной странице, либо запросить, чтобы они разрешили HTTPS-соединения.
Обратите внимание на это: запрос все равно будет работать, если вы перейдете по URL-адресу API вместо того, чтобы пытаться загрузить это с АЯКСОМ. Это происходит потому, что браузер не загружает ресурс с защищенной страницы, вместо этого он загружает небезопасную страницу и принимает это. Однако для того, чтобы он был доступен через AJAX, протоколы должны совпадать.
Я решил эту проблему, добавив следующий код на HTML-страницу, так как мы используем сторонний API, который нами не контролируется.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Надеюсь, это поможет, и для записи тоже.
Если ваш код API выполняется на node.js сервер, тогда вам нужно сосредоточить свое внимание там, а не в Apache или NGINX. Микель прав, изменение 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()