Blocage d’une requête multiorigines (Cross-Origin Request)

**OZ1977** · 01/10/2019, 18h11

Bonjour,

malgré mais nombreuses recherches et le fait qu'il y ai de nombreux posts sur le sujet, je n'ai pas trouvé de réponse à mon problème

j'essaie de récupérer les données d'un fichier data.json et j'obtiens l'erreur ci-dessous
ce que je ne comprends pas c'est que ce code fonctionnait à l'IUT lorsque je l'ai étudié
j'ai essayé d'ajouter des add-on Access-Control-Allow-Origin sur firefox et chrome pour autoriser mais sans succès

mes fichiers demo.html, data.json et json.sj sont dans le même répertoire en local

d'avance merci pour votre aide

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///C:/Users/jl3.PRT-063/Desktop/JS/data.json. Raison : la requête CORS n’utilise pas http.

demo.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYP html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
</head>
<body onload="recuperationData()">
	<script type="text/javascript" src="json.js"></script>
</body>
</html>

json.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function recuperationData()
    {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", 'data.json', true);
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
          datas = JSON.parse(xmlhttp.responseText);          
          datas.forEach(function(datas) {
            console.log(datas.typeExam);
          })
        }
      };
      xmlhttp.send(null);
    }

data.json

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
[
	{
		"typeExam":"Examen 1",
		"unit": ["mg/L","g/dL"]
	},
	{
		"typeExam":"Examen 2",
		"unit": ["µmol/L","mmol/L"]
	}
]

**Beginner.** · 02/10/2019, 06h09

Salut,

Ben apparement tu essais de lire un fichier local alors oui ça bloque, j'ai déjà eu le problème et il a suffit soit de lancer le navigateur avec une option spéciale (que j'ai mentionnée dans plusieurs fils à retrouver...) soit en utilisant un serveur local (utilise par exemple un EDI pour voir... avec Bracket ou VSCode tu peux faire tester ça facilement).

**OZ1977** · 02/10/2019, 12h00

je n'ai pas retrouvé de posts de ta part traitant du sujet...
mais j'ai modifié le paramétrage de chrome : --allow-file-access-from-files --disable-web-security

malgré cela, ma requête n'aboutit jamais
j'ai fait du pas à pas :
readyState passe successivement 2, 3 et 4 mais le status ne passe jamais à 200 (reste égale à 0) donc je ne parse jamais mon fichier...
je ne sais pas si c'est lié à la modification que j'ai faite à Chrome...

Code :

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
 
function recuperationData()
    {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", 'data.json', true);
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
          datas = JSON.parse(xmlhttp.responseText);          
          datas.forEach(function(datas) {
            //console.log(datas.typeExam);
          })
        }
        console.log('test')
      };
      xmlhttp.send(null);
    }

**hclatomic** · 02/10/2019, 12h40

Hello,

Cela fait longtemps que je n'avais plus vu coder directement XMLHttpRequest, puisqu'il semble que ce soit deprecated.
Peut-être que ceci peut aider :
https://medium.com/netscape/hacking-...t-35f6206cc646

Cordialement
Hervé

**OZ1977** · 02/10/2019, 13h40

merci Hervé
je sors de l'IUT (juin dernier) et c'est la seule méthode que l'on ai apprise en cours de JS...
je ne comprends pas vraiment le post que tu m'as transféré en lien

et surtout je suis surpris que ce soit si compliqué de développer et tester son code JS en local ...

**Beginner.** · 02/10/2019, 21h25

Envoyé par OZ1977

et surtout je suis surpris que ce soit si compliqué de développer et tester son code JS en local ...

Oui c'est plus ou moins compliqué, j'avais aussi des problèmes comme ça mais par la suite j'ai utilisé certains outils et ça va beaucoup mieux alors si les options du navigateur ne fonctionnent plus alors utilise un bon EDI qui entre autres te permettra de lancer ta page avec un serveur local, c'est de toute façon préférable aux options (qui ne sont pas bonnes puisqu’elles suppriment des sécurités) et pour d'autres choses tu en auras besoin par exemple si ta page utilises des modules (import/export) il faudra aussi un serveur local pour tester...

Bracket et VS code sont gratuits et bien pratiques...

---> Mais sinon tu peux tester cette extension : Web Server for Chrome

EDIT : A mon avis ce sera plus simple et plus efficace* que de faire ce que tu demandes ici : Lancer serveur local - Windows **

* plus efficace car avec un bon EDI tu as pleins d'autres choses comme l'assistance (auto-complétion, linter, réferrences, go to definition...)...
Et tu peux même avoir un fonctionnement en live : si tu modifies ton code ta page est relancée automatiquement...

** Une petite parenthèse : dans ce fil tu dis "et je cherche une solution alternative plus légère sous linux il me semble que l'on peut faire php -S localhost:8000" ... ---> Ben sous linux Python est déjà installé et j'ai vu qu'on pouvait facilement utiliser un serveur avec Python...

Envoyé par OZ1977

...
malgré cela, ma requête n'aboutit jamais
j'ai fait du pas à pas :
readyState passe successivement 2, 3 et 4 mais le status ne passe jamais à 200 (reste égale à 0) donc je ne parse jamais mon fichier...

Ben vu qu'en local tu n'utilises pas le protocole http alors peut-être que c'est normal ? J'en suis pas sûr, je n'ai pas testé mais raison de plus pour utiliser un serveur local...

Tu pourrais quand même tester en supprimant cette partie "&& xmlhttp.status == 200" de la condition...

**OZ1977** · 03/10/2019, 21h25

Salut Beginner.

j'utilise wamp et çà fonctionne
merci pour l'info sur le server chrome, je vais l'essayer
encore merci,

Blocage d’une requête multiorigines (Cross-Origin Request)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager