Je ne me sors pas de AJAX Javascript PHP et CORS policy

**Walterbelo** · 07/09/2024, 21h30

Autant pour moi. Une erreur que j'ai trop honte à avouer.
Un incident, une bêtise.......
Le code ci-après fonctionne PARFAITEMENT !
Toutes mes excuses

Bonjour à toutes et à tous,
Je veux utiliser AJAX pour mettre une application au goût du jour. Je suis au niveau zéro de l'utilisation d'AJAX, je fais mon premier essai.
Voici le message que m'envoie Chrome :

file:///C:/xampp/htdocs/Test/SendAjax.php' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

Et me voila gros Jean comme devant
J'utilise Apache avec XAMPP sous Windows 11
Un grand merci de votre aide.

Le code html :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
    <head>
        <title>Send Ajax</title>
        <meta charset="utf-8" />
    </head>
	 <body>
<script>
function SendAjax(texte) {
    // Créer une instance de XMLHttpRequest
	texte="Bravo Belo"
	alert(texte)
    var xhr = new XMLHttpRequest();
 
    // Configurer la requête POST vers le script PHP
    xhr.open("POST", "SendAjax.php", true);
 
    // Définir le type de contenu comme étant du JSON ou du formulaire classique
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
    // Gérer la réponse de PHP
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // Réponse réussie, faire quelque chose avec la réponse
            console.log("Réponse du serveur : " + xhr.responseText);
        }
    };
 
    // Envoyer la requête avec le texte passé en paramètre
    xhr.send("texte=" + encodeURIComponent(texte));
}
 
</script>	
 
   <br>
   <font size="15pt" color="red">
   Test : Envoyer un texte à un programme PHP par Ajax
   </font>
   <br>
<form>
<input type="button" value="Go" onclick="SendAjax()"/>
</form>
<br>     
    </body>
</html>

Le code PHP :

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php
 header('Access-Control-Allow-Origin: *');
if (isset($_POST['texte'])) {
    $texte = $_POST['texte'];
    // Faire quelque chose avec le texte, par exemple l'afficher
    echo "Texte reçu : " . htmlspecialchars($texte);
} else {
    echo "Aucun texte reçu";
}
?>

**mathieu** · Hier, 01h21

un petite proposition : vous pouvez maintenant utiliser fetch sur tous les navigateurs récents, ça vous fera du code plus léger que XMLHttpRequest.

dans votre exemple, ça donnera quelque chose comme cela :

Code javascript :

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
function SendAjax(texte)
{
 
	const donnees = new FormData();
	donnees.append("texte", texte);
 
	const parametres = {
		"method" : "POST",
		"body" : donnees,
	};
 
	fetch("SendAjax.php", parametres)
		.then(reponse => reponse.text())
		.then(texte => {
			console.log("Réponse du serveur : " + texte);
		})
	;
 
}

et si vous voulez faire une réponse plus complexe, vous pouvez oublier le xml, faire une réponse au format json et la récupérer comme cela :

Code javascript :

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

1
2
3
4
5
6
7
fetch("SendAjax.php", parametres)
	.then(reponse => reponse.json())
	.then(json => {
		console.log("Réponse du serveur au format JSON : ");
		console.log(json);
	})
;

https://developer.mozilla.org/fr/doc...I/Window/fetch

**Walterbelo** · Aujourd'hui, 00h51

Un grand merci pour m'avoir fait découvrir fetch. Le code est vraiment simplifié.

Je ne me sors pas de AJAX Javascript PHP et CORS policy

AJAX

Discussions similaires

Partager

Partager