Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

CORS html/javascript


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    CORS html/javascript
    Bonjour,
    J'aimerais, depuis une page html pouvoir effectuer une requête http vers un système se trouvant dans mon réseau. Pour cela j'utilise javascript et XMLHttpRequest.
    Voici mon code :

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        <title>data</title>
    </head>
     
    <body>
    <button onclick="blabla()">getSipStatus</button>
    </body>
     
    <script type="text/javascript">
        function blabla(){
            var xhr = new XMLHttpRequest();
            return new Promise(function(resolve, reject) {
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 300) {
                            reject("Error, status code = " + xhr.status)
                        } else {
                            resolve(xhr.responseText);
                            console.log(xhr.responseText)
                        }
                    }
                }
                url="http://192.168.10.102/bha-api/sip.cgi?action=status"
                xhr.open('get', url, true)
                xhr.setRequestHeader("Access-Control-Allow-Origin","http://localhost:3000")
                xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
                xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type');
                xhr.send();
            });
        }
    </script>
     
    </html>


    Et voici l'erreur que j'obtient lorsque je charge cette page dans chrome ou firefox :

    Access to XMLHttpRequest at 'http://192.168.10.102/bha-api/sip.cgi?action=status' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  2. #2
    Rédacteur/Modérateur

    Il s'agit d'une sécurité, tu ne peux pas faire uen requête ajax sur un autre domaine sans autorisation:

    fais une petit recherche avec
    Access-Control-Allow-Origin:
    Tu arriveras sur des liens de ce type
    https://developer.mozilla.org/fr/doc...OriginManquant
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Futur Membre du Club
    J'ai déjà regardé sur les forums etc mais aucunes solutions proposées ne fonctionne pour moi. J'ai ajouté les bonne autorisations dans le header mais aucun résultat ...

  4. #4
    Futur Membre du Club
    Si je tape l'url : http://192.168.10.102/bha-api/sip.cg...?action=status dans mon navigateur j'obtient un Json. L'adresse 192.168.10.102 est présente dans mon réseau local et je ne peux pas du tout modifier la configuration de cette machine afin d'ajouté certaines autorisations.
    J'aimerais juste depuis une page html récupérer le json renvoyé par cette adresse.

  5. #5
    Membre expert
    Citation Envoyé par mathias39 Voir le message
    Si je tape l'url : http://192.168.10.102/bha-api/sip.cg...?action=status dans mon navigateur j'obtient un Json
    c'est normal... tu ne requetes pas l'url depuis un autre domaine...
    comme l'a precise SpaceFrog, c'est par securite que les ajax cross-domain ne sont pas autorises. il faut que dans la conf de ton serveur tu autorise un (ou tous) autre domaine a acceder a ton serveur
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  6. #6
    Futur Membre du Club
    Mais je ne peux pas accéder du tout à la configuration du serveur se trouvant sur l'adresse ip cible de ma requète

  7. #7
    Rédacteur/Modérateur

    Alors tu ne pourras pas faire un ajax…
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  8. #8
    Futur Membre du Club
    Existe-t'il d'autre moyen de récupérer le json renvoyé par cette url ?

  9. #9
    Membre du Club
    Et comment doit-on configurer ?
    Bonjour.

    Je suis tombé sur la même erreur aujourd'hui en cherchant à utiliser EventSource. L'une des très rares pages qui en parlent (très succinctement…) est celle de Mozilla évoquée plus haut.

    J'ai donc mis un .htaccess sur mon site avec la ligne
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    Header set Access-Control-Allow-Origin mon-domaine


    avec ou sans apostrophe autour du domaine (c'est mis dans ces pages… sans exemple) et j'ai toujours un avertissement CORS qui change de message&#8239;; il me dit que
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    Access-Control-Allow-Origin=mon-domaine


    ne correspond pas dans le header à
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    Access-Control-Allow-Origin=mon-domaine


    !




    Du coup, j'ai testé la version nginx vu qu'entre temps j'ai remarqué que mon serveur était nginx…

    Ça ne lui a pas plus du tout&#8239;!

    Donc, pour enrichir l'aide et la documentation sur cette configuration et avoir un exemple concret sur le net, que faut-il mettre précisément et où&#8239;?

    Merci.

  10. #10
    Rédacteur/Modérateur

    coté serveur avec un curl ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    Futur Membre du Club
    Oui mais côté serveur l'adresse 192.168.10.xxx n'est pas atteignable car elle est dans le réseau local du client ...

  12. #12
    Rédacteur/Modérateur

    a part déposer le fichier ou une copie dans un endroit accessible, DMZ … ou faire un web service dans un endroit accessible qui ira chercher les données ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  13. #13
    Modérateur

    Bonjour,
    j'ai du mal à comprendre l'architecture:
    pouvoir effectuer une requête http vers un système se trouvant dans mon réseau.
    L'adresse 192.168.10.102 est présente dans mon réseau local
    je ne peux pas accéder du tout à la configuration du serveur se trouvant sur l'adresse ip cible de ma requète
    l'adresse 192.168.10.xxx n'est pas atteignable car elle est dans le réseau local du client ...

  14. #14
    Membre à l'essai
    Bonjour, je rencontre le même problème , depuis ce matin je n'arrive pas à récupérer les données depuis l'API jcdecaux. j'ai ce message d'erreur :


    "Access to XMLHttpRequest at 'https://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c' (redirected from 'http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c') from origin 'http://localhost:52330' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:52330' that is not equal to the supplied origin."

    A savoir que jusqu'à présent tout fonctionnait correctement car j'avais installé l'extension. J'ai tout essayé (navigation privée, vider le cache, changer de navigateur, etc...)

    Je ne sais plus comment faire quelqu'un a déjà rencontré ce problème et l'a arrangé ?

  15. #15
    Membre confirmé
    Bonjour,
    Difficile à dire comme ça.
    Access-Control-Allow-Origin est une entête qui vient du serveur auquel s'adresse XMLHttpRequest.
    Apparemment, la valeur est la même que l'origine envoyée, donc en principe ce devrait être bon...

    D'après mes tests, je pense que le problème vient de votre configuration, il reste à savoir où (httpd.conf, htaccess, js ?)

    A tester :
    Créer un fichier test.html et dans des balises <script></script>, y mettre l'exemple ici (en remplaçant l'url).
    Ensuite, tester ce fichier de ces deux manières :
    - Via le serveur local : localhost:52330/test.html
    - Via le protocole file en ouvrant directement le fichier avec un navigateur.

    Dans la console, il faut certes regarder la réponse, mais aussi les entêtes de la requête et de la réponse (qu'on peut voir aussi dans l'onglet réseau).

  16. #16
    Membre à l'essai
    J'ai trouvé la solution içi :

    https://medium.com/@dtkatz/3-ways-to...ks-d97d55946d9


    Il suffit d'ajouter cet URL juste avant de déclarer votre API : https://cors-anywhere.herokuapp.com/

    par exemple :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
            this.ajaxGet('https://cors-anywhere.herokuapp.com/http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c', (reponse) => {
    //CODE
    }

  17. #17
    Membre confirmé
    Bonjour,
    Citation Envoyé par Lunesti Voir le message
    J'ai trouvé la solution içi :
    Disons que c'est une solution qui dépanne (et c'est bien de l'avoir trouvée ! et aussi de la communiquer ! ).

    Idéalement/ultérieurement, il serait bien d'analyser ce qui coince de votre côté dans le cas d'un accès direct.

  18. #18
    Membre à l'essai
    Oui, ce qui est sûr c'est que cela ne peut pas venir de mon code car cela fonctionnait, et du jour au lendemain ça n'a plus fonctionné. N'ayant rien modifié au préalable qui aurait pu causer ce dysfonctionnement je ne peux qu'en déduire que cela provient de mon hébergeur OVH mais ça reste à confirmer

###raw>template_hook.ano_emploi###