Problème Cross origin requests AJAX en jQuery par Dr. Hackenbush - page 1

28 avril 2018 à 11:30:52

Bonjour à tous,

j'essaie de faire passer des données php dans ma page htm avec le serveur local wamp en utilisant AJAX, mais je reçois un message d'erreur :

Failed to load file:///F:/OpenClassRooms/WampServer/wamp64/www/apache/TP/chat.php: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

(J'ai la même erreur avec les fichiers .JSON)

J'ai donc fait de multiples recherches sur le net et je suis tombé sur plusieurs personnes qui disaient qu'il fallait ajouter " -allow-file-access-from-files" dans l'exe de google chrome pour pouvoir lire les requêtes AJAX locales. C'est ce que je fis mais malheureusement ça ne marcha pas...

Ce qu'il y a de bizarre c'est que il y a quelques mois je travaillais sur javascript et je n'avais pas de problème à recevoir des données Json ou php.

mon code si ça peut vous servir:

ac.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>TP Chat jQuery avec Ajax</title>

  </head>
  <body>
    <fieldset id="chat">
      <legend>Un chat en jQuery</legend>
        <div id="chat-messages">
        </div>  
      <!-- Zone des formulaires -->
      <form name="inscription" method="post" action="#">
        <input id="pseudo" class="champs" type="texte" name="nom" value="pseudo" size="5" required/>
        <input id="commentaire" class="champs" type="texte" name="message" required />
        <input id="validation" class="champs" type="button" value="" title="Cliquez pour envoyer"/>
      </form>  
      
    

    
    </fieldset>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
  </body>
</html>

script.js

$(function(){

	$('#validation').click(function(){

		var nom = $('#nom').val();
		var message = $('#message').val();
		$.post('chat.php', {
			'nom' : nom,
			'message' : message
		}, afficheConversation);

	}); // Fin de l'événement click

	function afficheConversation() {
		$('#conversation').load('apache/TP/ac.htm');
		$('#message').val('');
		$('#message').focus();
	}

	setInterval(afficheConversation, 4000);

}); // Fin de jQuery

chat.php

<?php
	$nom = $_POST['nom'];                    //On récupère le pseudo et on le stocke dans une variable
	$message = $_POST['message'];            //On fait de même avec le message
	$ligne = $nom.' > '.$message.'<br>';     //Le message est créé 
	$leFichier = file('apache/TP/ac.htm');             //On lit le fichier ac.htm et on stocke la réponse dans une variable (de type tableau)
	array_unshift($leFichier, $ligne);       //On ajoute le texte calculé dans la ligne précédente au début du tableau
	file_put_contents('apache/TP/ac.htm', $leFichier); //On écrit le contenu du tableau $leFichier dans le fichier ac.htm

?>

Je suis sur chrome ou Opera.

Merci.

Lucky13

28 avril 2018 à 11:39:38

Hello,

Je n'ai jamais rencontré ce comportement en local... une ressource externe ou une extension peu en effet poser problème ???

Essais de mettre cette entête au début de ton script PHP pour voir :

header("Access-Control-Allow-Origin: *");

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Celousco

28 avril 2018 à 12:51:57

Mmh, ton serveur est en local sous WAMP ? Comment lis-tu ton fichier, quel adresse utilises-tu pour faire ton appel AJAX ?

A savoir que Chrome t'empêchera toujours de faire des appels AJAX en local (c'est une mesure de sécurité, mais une extension peut débloquer l'interdiction, mais n'oublie pas de tout remettre comme avant une fois que tu as fini de faire du développement)

Dr. Hackenbush

28 avril 2018 à 13:50:34

Merci pour vos réponses !

Lucky13 : J'ai essayé mais ça ne marche pas...

Celousco : Oui c'est sous WAMP.

J'utilise dans mon script jquery :

$('#conversation').load('apache/TP/ac.htm');

pour faire appel à ma page php.

Mes fichiers se trouvent tous dans le répertoire TP qui se situe dans "www"->"Apache" -> "TP" (donc ça fait :"www/Apache/TP").

En utilisant la correction, rien ne s'affiche ni sur la page htm ni dans la console...

https://openclassrooms.com/courses/simplifiez-vos-developpements-javascript-avec-jquery/tp-un-chat-en-jquery

Celousco

30 avril 2018 à 13:42:54

As-tu vérifié d'avoir mis un "A" et non un "a" ?

Dr. Hackenbush

2 mai 2018 à 10:57:49

Oui. J'ai essayé de hoster le site sur un serveur non local. Mais ça ne marche toujours pas. J'ai l'erreur :"Failed to load resource: the server responded with a status of 404 ()" sur le site 000webhost.

Problème Cross origin requests AJAX en jQuery

Supprimer

Modérer

Signaler le message aux modérateurs