"Contenu mixé bloqué" lors de l'exécution d'une opération HTTP AJAX dans une page HTTPS

J'ai un formulaire que je soumets (à travers GET tel qu'il est requis de cette façon) à un crm (ViciDial). Je peux soumettre avec succès le formulaire mais si je le fais, le fichier de traitement de crm va juste faire é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, alors j'ai décidé d'utiliser AJAX pour soumettre le formulaire et le rediriger vers la page dont j'ai besoin, mais je reçois cette erreur sur mon navigateur:

Contenu mélangé: la page de ' https://page.com ' a été chargée sur HTTPS, mais a demandé un point d'extrémité 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é sur HTTPS.

C'est 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 réglage de https dans l'URL ne fonctionnera pas, est-ce que je peux soumettre les données via GET et rediriger l'utilisateur vers ma page de remerciements?

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

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

Donc, si vous ne pouvez pas configurer l'API comme étant HTTPS (c'est mon cas), nous pouvons encore aborder cela de manière différente.

Le Problème principal n'était pas le problème de contenu mixte, c'est que je voulais soumettre des données à une API et rediriger les utilisateurs vers une page de remerciements. Au lieu d'utiliser AJAX, j'ai créé un fichier php qui reçoit les données qui l'envoient en utilisant curl à l'API (comme 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 remerciements.

Si vous chargez une page dans votre navigateur en utilisant HTTPS, le navigateur refusera de charger toutes les ressources via HTTP. Comme vous l'avez essayé, la modification de l'URL de l'API pour avoir 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 soit forcer HTTP sur la page principale, soit demander qu'ils autorisent les connexions HTTPS.

Remarque: la demande fonctionnera toujours si vous accédez à l'URL de l'API au lieu de tenter de la charger avec AJAX. C'est parce que le navigateur ne charge pas une ressource dans une page sécurisée, mais il charge une page instable et accepte cela. Pour que cela soit disponible via AJAX, les protocoles devraient correspondre.

Si votre code API fonctionne sur un serveur node.js, vous devez concentrer votre attention là-dedans, pas dans Apache ou NGINX. Mikel a raison, la modification de l'URL de l'API vers HTTPS est la réponse, mais si votre API appelle un serveur node.js, il est préférable de configurer HTTPS! Et bien sûr, le serveur node.js peut être sur n'importe quel port inutilisé, il ne doit pas nécessairement être le port 443.