J'ai un formulaire que je soumets (via GET car il est requis de cette façon) à un crm (ViciDial). Je peux soumettre le formulaire avec succès, mais si je fais cela, le fichier de traitement au crm fera simplement écho à un texte de réussite et c'est tout.

Au lieu de ce texte, je souhaite afficher une page de remerciement sur mon site Web, j'ai donc décidé d'utiliser AJAX pour soumettre le formulaire et le rediriger vers la page dont j'ai besoin, mais j'obtiens cette erreur sur mon navigateur:

Contenu mixte: la page sur ' https://page.com ' a été chargée via HTTPS, mais a demandé un point de terminaison XMLHttpRequest non sécurisé ' http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data ». Cette demande a été bloquée; le contenu doit être diffusé via HTTPS.

Voici mon 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>

Le simple fait de définir https dans l'URL ne fonctionnera pas, y a-t-il un moyen de soumettre les données via GET et de rediriger l'utilisateur vers ma page de remerciement?

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

Le problème ici était un contenu mixte, cela signifie que j'ai chargé une page via HTTPS et que j'essayais de frapper via AJAX une API qui était en HTTP. Mais le navigateur ne nous permettra pas de faire cela.

Donc, si vous ne pouvez pas définir l'API sur HTTPS (c'était mon cas), nous pouvons toujours aborder cela d'une manière différente.

Le problème principal n'était pas le problème du contenu mixte, c'était que je voulais soumettre des données à une API et rediriger les utilisateurs vers une page de remerciement sophistiquée. Au lieu d'utiliser AJAX, j'ai créé un fichier php qui reçoit les données, l'envoie en utilisant curl à l'API (car cela se fait côté serveur, il n'y a pas de problème de contenu mixte) et redirige mon utilisateur heureux vers une page de remerciement sophistiquée.

Si vous chargez une page dans votre navigateur en utilisant HTTPS, le navigateur refusera de charger des ressources via HTTP. Comme vous l'avez essayé, modifier l'URL de l'API pour qu'elle utilise HTTPS au lieu de HTTP résout généralement ce problème . Cependant, votre API ne doit pas autoriser les connexions HTTPS. Pour cette raison, vous devez forcer HTTP sur la page principale ou leur demander d'autoriser les connexions HTTPS.

Remarque à ce sujet: la requête fonctionnera toujours si vous accédez à l'URL de l'API au lieu d'essayer de la charger avec AJAX. En effet, le navigateur ne charge pas une ressource à partir d'une page sécurisée, mais il charge une page non sécurisée et il l'accepte. Pour qu'il soit disponible via AJAX, cependant, les protocoles doivent correspondre.

J'ai résolu ce problème en ajoutant le code suivant à la page HTML, car nous utilisons l'API tierce qui n'est pas contrôlée par nous.

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

J'espère que cela aiderait, et pour mémoire aussi.

Si vous visitez simplement une page Web en laquelle vous avez confiance et que vous souhaitez avancer rapidement, il vous suffit de:

1- Cliquez sur l'icône du bouclier à l'extrême droite de la barre d'adresse.

2- Dans la fenêtre pop-up, cliquez sur «Charger quand même» ou «Charger un script non sécurisé» (selon votre version de Chrome).

Si vous souhaitez configurer votre navigateur Chrome sur TOUJOURS (dans toutes les pages Web) autoriser le contenu mixte:

1- Dans un navigateur Chrome ouvert, appuyez sur Ctrl + Maj + Q sur votre clavier pour forcer la fermeture de Chrome. Chrome doit être complètement fermé avant les étapes suivantes.

2- Cliquez avec le bouton droit sur l'icône du bureau Google Chrome (ou sur le lien du menu Démarrer). Sélectionnez Propriétés.

3- A la fin des informations existantes dans le champ Cible, ajoutez: "--allow-running-insecure-content" (Il y a un espace avant le premier tiret.)

4- Cliquez sur OK.

5- Ouvrez Chrome et essayez de lancer le contenu qui a été bloqué précédemment. Cela devrait fonctionner maintenant.

La raison de cette erreur est très simple. Votre AJAX essaie d'appeler via HTTP alors que votre serveur fonctionne sur HTTPS, donc votre serveur refuse d'appeler votre AJAX. Cela peut être résolu en ajoutant la ligne suivante à l'intérieur de la balise head de votre fichier HTML principal:

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

Si votre code API s'exécute sur un serveur node.js, vous devez y concentrer votre attention, pas dans Apache ou NGINX. Mikel a raison, changer l'URL de l'API en HTTPS est la réponse, mais si votre API appelle un serveur node.js, il vaut mieux la configurer pour HTTPS! Et bien sûr, le serveur node.js peut être sur n'importe quel port inutilisé, il n'est pas nécessaire qu'il s'agisse du port 443.

Au lieu d'utiliser la méthode Ajax Post, vous pouvez utiliser la forme dynamique avec l'élément. Cela fonctionnera même si la page est chargée en SSL et que la source soumise n'est pas SSL.

Vous devez définir la valeur de l'élément du formulaire.

En fait, un nouveau formulaire dynamique s'ouvrira en mode non SSL dans un onglet séparé du navigateur lorsque l'attribut cible a défini '_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()

J'avais le même problème, mais pour moi, le problème était la commande ng build. Je faisais "ng build --prod" je l'ai corrigé en "ng build --prod --base-href / applicationname /". et cela a résolu mon problème.

dans mon cas, mon hôte local était httpet ma version déployée l'était https, j'ai donc utilisé ce script pour ajouter la balise meta http-equiv uniquement pour 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)
}