CORS html/javascript

**mathias39** · 27/07/2020, 15h01

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.

**SpaceFrog** · 27/07/2020, 15h10

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

**mathias39** · 27/07/2020, 15h40

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 ...

**mathias39** · 27/07/2020, 15h44

Si je tape l'url : http://192.168.10.102/bha-api/sip.cgi?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.

**Doksuri** · 27/07/2020, 15h55

Envoyé par mathias39

Si je tape l'url : http://192.168.10.102/bha-api/sip.cgi?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

**mathias39** · 27/07/2020, 16h02

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

**SpaceFrog** · 27/07/2020, 16h04

Alors tu ne pourras pas faire un ajax…

**mathias39** · 27/07/2020, 16h19

Existe-t'il d'autre moyen de récupérer le json renvoyé par cette url ?

**FlorentA** · 27/07/2020, 16h22

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 ; 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 !

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ù ?

Merci.

**SpaceFrog** · 27/07/2020, 16h22

coté serveur avec un curl ?

**mathias39** · 27/07/2020, 16h39

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 ...

**SpaceFrog** · 27/07/2020, 17h25

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 ...

**NoSmoking** · 27/07/2020, 17h42

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 ...

**Lunesti** · 15/08/2020, 12h21

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é ?

**Loralina** · 16/08/2020, 22h33

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).

**Lunesti** · 17/08/2020, 10h03

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
}

**Loralina** · 17/08/2020, 12h08

Bonjour,

Envoyé par Lunesti

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.

**Lunesti** · 17/08/2020, 14h16

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

CORS html/javascript

JavaScript

Discussions similaires

Partager

Partager