Partage
  • Partager sur Facebook
  • Partager sur Twitter

Créer de pages web intéractives avec javascript

problème avec dernier exercice : serveur web/témoignage

Sujet résolu
    20 octobre 2018 à 22:08:29

    Bonjour,

    je suis actuellement au chapitre pour envoyer des données à un serveur web externe, dans le dernier exercice : témoignage.

    En fait j'ai plusieurs problèmes :

    **Avec le corrigé**

    Si je regarde le corrigé et que je fait la soumission, j'ai bien le message qui s'affiche indiquant qu'il a bien été ajouté au serveur ... mais ...

    quand je regarde sur le serveur, il n'y est pas et quand je fais F12, j'ai ce message d'erreur :

    SEC7118: XMLHttpRequest pour https://oc-jswebsrv.herokuapp.com/api/temoignage nécessite une spécification CORS (Cross Origin Resource Sharing).

    et celui là (mais c'est le même)

    SEC7119: XMLHttpRequest pour https://oc-jswebsrv.herokuapp.com/api/temoignage nécessite une spécification CORS préliminaire.

    **Avec mon programme**

    J'ai dans mon .js : (c'est le même code que dans le cours et le corrigé)

    if (isJson) {
            //definit qu'il s'agit de Json
            req.setRequestHeader("Content-Type", "application/json");
            //transforme le javascript en Json
            data = JSON.stringify(data);

    }

    mais j'ai ce message d'erreur :

    SCRIPT5022: InvalidStateError

    Fichier : temoignageAjax.js, ligne : 20, colonne : 9

    Je ne comprends pas du tout où est le problème ... d'autant plus que dans le corrigé c'est exactement la même chose ...

    Des idées pour m'aider à comprendre ...? Je n'ai aucune notion en CORS ou PHP ...

    Mais ce qui m'intrigue c'est que même le corrigé a un message d'erreur ...

    Merci d'avance pour votre aide

    • Partager sur Facebook
    • Partager sur Twitter
      21 octobre 2018 à 8:48:02

      Hello, tu pourrais nous mettre le lien + ancre ou nous montrer le(s) code(s) complet en utilisant les balises code stp ?

      Mais pour te dire ce que c'est les problèmes de CORS sont liés au fait que tu souhaites accéder à une ressource sur un autre nom de domaine que le tiens. Et d'autres choses encore. Je te laisse regarder sur internet le CORS.

      Mais ce qui m'intrigue c'est que tu n'as pas de notion en PHP ou autre alors que tu dois sauvegarder tes données ?

      • Partager sur Facebook
      • Partager sur Twitter
      $2b||!$2b
        21 octobre 2018 à 20:52:21

        Bonjour/bonsoir

        Tout d'abord merci pour ton intérêt.

        Je n'ai pas de notion en PHP et en CORS ... parce que pour l'instant je n'ai fais que les cours : HTML/CSS, Javascript-intro, Javascript-web et j'ai commencer javascript dynamiser site web (je m'en sers comme cours d'approfondissement et pour réviser).

        Le PHP sera le prochain.

        Envoyer des données sur un serveur externe est abordé en fin de chapitre sur l'envoi sur un serveur externe (javascript-web), y a même une activité la dessus.

        Voici le lien vers le corrigé de l'exercice : https://oc-courses.github.io/javascript-web/chapitre_10/html/temoignage.html

        Quand je valide ma requête, j'ai bien le message qui dit que le témoignage a été ajouté, mais il n'apparait pas sur le serveur ici : https://oc-jswebsrv.herokuapp.com/temoignages

        Et j'ai les messages qui me demandent une spécification CORS préliminaire ... Mais il s'agit là du corrigé !! Alors je ne comprends pas pourquoi ça ne marche pas.

        Merci d'avance pour votre aide

        • Partager sur Facebook
        • Partager sur Twitter
          22 octobre 2018 à 8:06:24

          Je me suis mal exprimé.

          Ce qui me paraissais bizarre c'est que l'on vous demande de sauvegarder votre message sans vous avoir donné de notion de PHP.

          Mais je crois avoir compris qu'on vous spécifie d'envoyer sur une URL précise c'est ça ?

          Dans ce cas cela devrait fonctionné car ils ont dû spécifié d'accepter les requête de n'importe quelle destination logiquement.

          Vois peut être avec un admin ou le prof du cours en question.

          • Partager sur Facebook
          • Partager sur Twitter
          $2b||!$2b
            22 octobre 2018 à 14:26:29

            c'est tout a fait normal dans la grande majorité des cas, c'est pour des raison de sécurités, tu ne peux pas faire des requêtes sur un serveur diffèrent de celui d'origine sans autorisation CROS (genre une page venant du serveur A ne peux pas faire de requêtes sur le serveur B).

            Maintenant vu le message je dirais que tu n'as pas fait d'erreur mais que le serveur n'a pas été configuré pour accepter ce genre de choses.

            Le plus simple serai de te faire un petit serveur pour tester ou partir de principe que ça fonctionne ^^.

            • Partager sur Facebook
            • Partager sur Twitter

            la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

            Mon GitHub

              23 octobre 2018 à 21:59:10

              Bonsoir/jour,

              Merci pour vos messages, je vais essayer de contacter le prof du cours ... parce que j'ai bien peur que cela m'empêche de finir le cours en m'empêchant de réussir la dernière activité.

              En tout cas, je vous remercie pour vos suggestions/aides.

              • Partager sur Facebook
              • Partager sur Twitter
                25 octobre 2018 à 21:26:47

                Bonsoir,

                juste un petit message pour vous dire qu'apparemment ... mon problème est un problème de version de window.

                J'ai un window 7 version familliale, mon mari lui a un window 10.

                Et chez lui ça fonctionne !!!

                N'ayant pas les moyens de changer de pc actuellement ... et n'utilisant pas le pc de mon mari ... (nos jardins privés) ...

                Je me vois dans l'obligation de ne pas pouvoir finir ce cours. Mais je pense avoir compris les bases.

                N'ayant pas actuellement de retour du prof, je ne sais pas si cela changera dans l'avenir.

                • Partager sur Facebook
                • Partager sur Twitter
                  26 octobre 2018 à 7:22:13

                  Alors je dirais que ce serai plus un problème de configuration dans ce cas.

                  Ce que je peux te conseiller c'est peut être de créer une machine virtuel Ubuntu sur lequel tu fais tes développements.

                  Même si j'avoue que ce que je te demande est déjà un peu plus avancé.

                  Il existe tout de même pas mal de tuto pour installer un environnement LAMP sur Ubuntu.

                  En tout cas met ton sujet en résolu si tu as trouvé l'origine du problème.

                  • Partager sur Facebook
                  • Partager sur Twitter
                  $2b||!$2b
                    26 octobre 2018 à 21:12:03

                    D'abord j'aimerai être sûre que c'est bien ça.

                    Ca me semble possible mais tout de même bizarre. Mais comme je vois que tu dis que c'est possible également, j'en prends note.

                    Mon pc est en fin de vie et très remplis. Je verrai ça quand le père noël sera passé. :-)

                    • Partager sur Facebook
                    • Partager sur Twitter
                      27 octobre 2018 à 7:11:35

                      Ah ah! J'ai bien ris merci ^^
                      • Partager sur Facebook
                      • Partager sur Twitter
                      $2b||!$2b
                        14 décembre 2018 à 23:52:33

                        Bonsoir,

                        le retour de vivi ...

                        Bon le père noël a eut un peu d'avance ... J'ai désormais un window 10 familliale.

                        Alors je viens de retester l'exercice du témoignage du cours ...

                        Et oohh tristesse ... oohh désespoir ... ça ne marche pas.

                        Quand je valide le corrigé pour tester ... il m'affiche bien le message d'envoi mais il n'y a rien sur le serveur.

                        Des idées ?

                        • Partager sur Facebook
                        • Partager sur Twitter
                          15 décembre 2018 à 8:29:52

                          Est-ce que tu pourrais nous donner le code du corrigé et ton code au complet pour voir la différence stp :)
                          • Partager sur Facebook
                          • Partager sur Twitter
                          $2b||!$2b
                            15 décembre 2018 à 10:44:13

                            Je vous donne que ceux du corrigé, parce que si j'arrive à la faire fonctionner chez moi, peut être que j'arriverai aussi à modifier mon code en conséquence pour l'exercice.

                            La page html

                            <!doctype html>
                            <html>
                            
                            <head>
                                <meta charset="utf-8">
                                <title>Témoignage sur le cours</title>
                            </head>
                            
                            <body>
                                <h1>Ajouter un témoignage</h1>
                                <form>
                                    <p>
                                        <label for="pseudo">Pseudo</label> :
                                        <input type="text" name="pseudo" id="pseudo" required>
                                    </p>
                                    <p>
                                        Ce cours était :
                                        <br>
                                        <input type="radio" name="evaluation" id="genial" value="5">
                                        <label for="genial">Génial !</label>
                                        <br>
                                        <input type="radio" name="evaluation" id="tresbien" value="4">
                                        <label for="tresbien">Très bien</label>
                                        <br>
                                        <input type="radio" name="evaluation" id="pasmal" value="3" checked>
                                        <label for="pasmal">Pas mal</label>
                                        <br>
                                        <input type="radio" name="evaluation" id="bof" value="2">
                                        <label for="bof">Bof</label>
                                        <br>
                                        <input type="radio" name="evaluation" id="nul" value="1">
                                        <label for="null">Nul</label>
                                        <br>
                                    </p>
                                    <p>
                                        <label for="message">Ajoutez un message</label> :
                                        <br>
                                        <textarea name="message" id="message" rows="5"></textarea>
                                    </p>
                                    <input type="submit">
                                </form>
                                <div id="resultat"></div>
                            
                                <script src="../js/ajax.js"></script>
                                <script src="../js/temoignage.js"></script>
                            </body>
                            
                            </html>

                            La page ajax

                            // Exécute un appel AJAX GET
                            // Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
                            function ajaxGet(url, callback) {
                                var req = new XMLHttpRequest();
                                req.open("GET", url);
                                req.addEventListener("load", function () {
                                    if (req.status >= 200 && req.status < 400) {
                                        // Appelle la fonction callback en lui passant la réponse de la requête
                                        callback(req.responseText);
                                    } else {
                                        console.error(req.status + " " + req.statusText + " " + url);
                                    }
                                });
                                req.addEventListener("error", function () {
                                    console.error("Erreur réseau avec l'URL " + url);
                                });
                                req.send(null);
                            }
                            
                            // Exécute un appel AJAX POST
                            // Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
                            // Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
                            function ajaxPost(url, data, callback, isJson) {
                                var req = new XMLHttpRequest();
                                req.open("POST", url);
                                req.addEventListener("load", function () {
                                    if (req.status >= 200 && req.status < 400) {
                                        // Appelle la fonction callback en lui passant la réponse de la requête
                                        callback(req.responseText);
                                    } else {
                                        console.error(req.status + " " + req.statusText + " " + url);
                                    }
                                });
                                req.addEventListener("error", function () {
                                    console.error("Erreur réseau avec l'URL " + url);
                                });
                                if (isJson) {
                                    // Définit le contenu de la requête comme étant du JSON
                                    req.setRequestHeader("Content-Type", "application/json");
                                    // Transforme la donnée du format JSON vers le format texte avant l'envoi
                                    data = JSON.stringify(data);
                                }
                                req.send(data);
                            }

                            La page javascript

                            document.querySelector("form").addEventListener("submit", function(e) {
                              e.preventDefault();
                              var temoignage = {
                                pseudo: e.target.elements.pseudo.value,
                                evaluation: e.target.elements.evaluation.value,
                                message: e.target.elements.message.value
                              };
                              ajaxPost(
                                "https://oc-jswebsrv.herokuapp.com/api/temoignage",
                                temoignage,
                                function(reponse) {
                                  var messageElt = document.createElement("p");
                                  messageElt.textContent = "Témoignage ajouté.";
                                  document.getElementById("resultat").appendChild(messageElt);
                                },
                                true
                              );
                            });
                            


                            EDITION :

                            Bon je me suis penchée sur les messages présents dans ma console de débogage :

                            SEC7118: XMLHttpRequest pour https://oc-jswebsrv.herokuapp.com/api/temoignage nécessite une spécification CORS (Cross Origin Resource Sharing).
                            Fichier : temoignage.html

                            SEC7119: XMLHttpRequest pour https://oc-jswebsrv.herokuapp.com/api/temoignage nécessite une spécification CORS préliminaire.
                            Fichier : temoignage.html

                            J'utilise IE actuellement. J'ai fait quelques recherches et je suis tombée là dessus : http://blog.inovia-conseil.fr/?p=202

                            Mais voici le passage intéressant -->

                            Ils permettent au navigateur et au serveur d’en savoir suffisamment l’un sur l’autre afin de déterminer si la requête ou la réponse cross-domain doit réussir ou échouer.

                            Pour fonctionner, le mécanisme nécessite :

                            • un navigateur supportant cette technologie :
                              • Internet Explorer 10+
                              • Firefox 3.5+
                              • Chrome 3+
                              • Safari 4+
                              Note : IE 8 et 9 ont un support partielde CORS. Retenir en particulier que :
                              • les méthodes HTTP PUT et DELETE ne sont pas supportées
                              • les requêtes à entête HTTP Content-Type ne peuvent contenir que la valeur text/plain
                              • les requêtes émises ne peuvent pas contenir de cookies

                            Je viens de refaire un test avec Chrome et Firefox. Apparemment cela fonctionne ... Il s'agit donc d'un problème de navigateur.

                            Problème résolu ... :)



                            -
                            Edité par Pitchounvivi 15 décembre 2018 à 18:49:21

                            • Partager sur Facebook
                            • Partager sur Twitter
                              16 décembre 2018 à 20:10:45

                              Woow! Tu utilises Internet Explorer ! xD

                              Je crois que la dernière personne à m'avoir dit cela est mon grand père xD (sans vouloir te vexer bien sûr :p)

                              Mais c'est bon à savoir. Je n'aurais en effet pas penser au navigateur car en générale on utilise plus IE.

                              • Partager sur Facebook
                              • Partager sur Twitter
                              $2b||!$2b
                                16 décembre 2018 à 21:55:09

                                T'inquiètes pas, je suis une vrai hybride ... j'aime l'ancien et le neuf ... J'aime bien tester plusieurs possibilités ....

                                En fait, je fais exprès d'utiliser celui là parce que j'enregistre pas mal de chose sur mon hdd.

                                Chrome n'est pas pratique pour enregistrer des pages web.

                                Et Modzilla m'a déjà causé des problèmes, à cause de certains plugins (pour payer par exemple).

                                • Partager sur Facebook
                                • Partager sur Twitter

                                Créer de pages web intéractives avec javascript

                                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                • Editeur
                                • Markdown