Erreur : "xmlhttprequest blocked by cors policy" pour lire un xml local.
Bonjour à tous. J'espère que je poste au bon endroit.
En vue de m’entraîner à utiliser les fichiers XML, j'ai voulu essayer de me créer une sorte de page web en local. L'objectif est simple : créer un formulaire depuis une page XML. J'ai donc décidé d'utiliser JQuery pour la lecture du fichier, mais à chaque fois que je lance la page, je suis stoppé par l'erreur suivante :
Citation:
Access to XMLHttpRequest at 'file:///C:/Users/*****/Desktop/MAIN/WERK/Javascript/xmlTest/test.xml' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
J'ai essayé de chercher sur le net à droite à gauche, mais j'ai rien trouvé qui semblait être la solution exacte à mon soucis. Ou alors j'ai mal cherché...
J'utilise Vivaldi comme navigateur internet.
Voilà mon code :
home.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formulaire</title>
</head>
<body>
<script src=".\node_modules\jquery\dist\jquery.js"></script>
<script src=".\test.js"></script>
<span id="texteJQ"></span>
<div id="XMLDisplay"></div>
</body>
</html> |
Le fichier xml en question
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?xml version="1.0" encoding="UTF-8"?>
<form>
<input x="10" y="10"></input>
<combo x="10" y="30">
<elem>rouge</elem>
<elem>bleu</elem>
<elem>vert</elem>
<elem>jaune</elem>
</combo>
<radio x="10" y="50">
<elem>cercle</elem>
<elem>carré</elem>
<elem>triangle</elem>
<elem>rectangle</elem>
</radio>
<checkbox x="10" y="100">Outline</checkbox>
<button x="10" y="120">OK</button>
</form> |
test.js (Pour le moment, je ne cherche qu'a trouver les balises "input".)
Code:
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
| $(function() {
$('#texteJQ').html('Hello world. Ce texte est affiché par jQuery.');
});
$(document).ready(function()
{
$.ajax(
{
type: "GET",
url: "test.xml",
async: false,
dataType: "xml",
success: function(xml)
{
$(xml).find('form').each(function()
{
$(xml).find('input').each(function()
{
$('#texteJQ').html("test");
let input = document.createElement("INPUT");
input.setAttribute("type", "text");
input.setAttribute("value", "Hello !");
});
});
}
});
}); |
Merci d'avance pour votre aide. :)
