Tengo un formulario que estoy enviando (a través de GET, ya que se requiere de esta manera) a un crm (ViciDial). Puedo enviar el formulario con éxito, sin embargo, si lo hago, el archivo de procesamiento en crm solo hará eco de un texto de éxito y eso es todo.

En lugar de ese texto, quiero mostrar una página de agradecimiento en mi sitio web, así que decidí usar AJAX para enviar el formulario y redirigirlo a la página que necesito, sin embargo, recibo este error en mi navegador:

Contenido mixto: la página en ' https://page.com ' se cargó a través de HTTPS, pero solicitó un punto final XMLHttpRequest no seguro ' http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data '. Esta solicitud ha sido bloqueada; el contenido debe publicarse a través de HTTPS.

Este es mi script 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>

El simple hecho de configurar https en la URL no funcionará, ¿hay alguna forma en la que pueda enviar los datos a través de GET y redirigir al usuario a mi página de agradecimiento?

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

El problema aquí fue contenido mixto, esto significa que cargué una página a través de HTTPS y estaba tratando de acceder a través de AJAX a una API que estaba en HTTP. Pero el navegador no nos permitirá hacer eso.

Entonces, si no puede configurar la API para que sea HTTPS (este fue mi caso), aún podemos abordar esto de una manera diferente.

El problema principal no era el problema del contenido mixto, era que quería enviar datos a una API y redirigir a los usuarios a una elegante página de agradecimiento. En lugar de usar AJAX, hice un archivo php que recibe los datos y los envía usando curl a la API (ya que esto se está haciendo en el lado del servidor, no hay problemas de contenido mixto) y redirige a mi usuario feliz a una elegante página de agradecimiento.

Si carga una página en su navegador usando HTTPS, el navegador se negará a cargar recursos a través de HTTP. Como lo ha intentado, cambiar la URL de la API para que tenga HTTPS en lugar de HTTP normalmente resuelve este problema . Sin embargo, su API no debe permitir conexiones HTTPS. Debido a esto, debe forzar HTTP en la página principal o solicitar que permitan conexiones HTTPS.

Tenga en cuenta esto: la solicitud seguirá funcionando si accede a la URL de la API en lugar de intentar cargarla con AJAX. Esto se debe a que el navegador no carga un recurso desde una página segura, sino que carga una página insegura y lo acepta. Sin embargo, para que esté disponible a través de AJAX, los protocolos deben coincidir.

Resolví esto agregando el siguiente código a la página HTML, ya que estamos usando la API de terceros que no está controlada por nosotros.

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

Espero que esto ayude, y también para un récord.

Si está visitando una página web en la que confía y desea avanzar rápidamente, simplemente:

1- Haga clic en el icono del escudo en el extremo derecho de la barra de direcciones.

2- En la ventana emergente, haga clic en "Cargar de todos modos" o "Cargar script inseguro" (dependiendo de su versión de Chrome).

Si desea configurar su navegador Chrome para SIEMPRE (en todas las páginas web) permitir contenido mixto:

1- En un navegador Chrome abierto, presione Ctrl + Shift + Q en su teclado para forzar el cierre de Chrome. Chrome debe estar completamente cerrado antes de los siguientes pasos.

2- Haga clic con el botón derecho en el icono del escritorio de Google Chrome (o en el enlace del menú Inicio). Seleccione Propiedades.

3- Al final de la información existente en el campo Destino, agregue: "--allow-running-insecure-content" (Hay un espacio antes del primer guión).

4- Haga clic en Aceptar.

5- Abra Chrome e intente iniciar el contenido que se bloqueó anteriormente. Debería funcionar ahora.

El motivo de este error es muy sencillo. Su AJAX está tratando de llamar a través de HTTP mientras que su servidor se está ejecutando en HTTPS, por lo que su servidor niega llamar a su AJAX. Esto se puede solucionar agregando la siguiente línea dentro de la etiqueta principal de su archivo HTML principal:

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

Si su código API se está ejecutando en un servidor node.js, entonces debe enfocar su atención allí, no en Apache o NGINX. Mikel tiene razón, cambiar la URL de la API a HTTPS es la respuesta, pero si su API está llamando a un servidor node.js, ¡es mejor que esté configurado para HTTPS! Y, por supuesto, el servidor node.js puede estar en cualquier puerto no utilizado, no tiene que ser el puerto 443.

En lugar de usar el método Ajax Post, puede usar la forma dinámica junto con el elemento. Funcionará incluso si la página está cargada en SSL y la fuente enviada no es SSL.

Debe establecer el valor del elemento de la forma.

En realidad, el nuevo formulario dinámico se abrirá como modo no SSL en una pestaña separada del navegador cuando el atributo de destino haya establecido '_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()

Yo tenía el mismo problema, pero para mí el problema era ng build command. Estaba haciendo "ng build --prod", lo he corregido a "ng build --prod --base-href / applicationname /". y esto resolvió mi problema.

en mi caso, mi localhost era httpy mi versión implementada era https, así que usé este script para agregar la metaetiqueta http-equiv solo para 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)
}