Bonjour à tous,

Je viens vers vous après de nombreuse recherche.

Je recherche à faire une application avec socket io sauf que j'ai une erreur récurrente.

j'ai ceci sur firefox :

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://file/socket.io/?EIO=4&transport=polling&t=NeK0LQY. Raison : échec de la requête CORS.

ceci sur chrome :

Failed to load resource: net::ERR_NAME_NOT_RESOLVED
polling-xhr.js:198 GET http://file/socket.io/?EIO=4&transport=polling&t=NeK1gid net::ERR_NAME_NOT_RESOLVED

Je me suis servi, de ce tutoriel :

https://socket.io/get-started/chat

de la documentation de cors, cherché sur des forums, mais rien n'y fais..

j'ai aussi tenté de désactiver le pare feux sur mon pc (il fais le serveur node)

la version de Socket.IO est v4.1.2

Avez vous des pistes ? Merci d'avance

-
Edité par JulienOo 16 juin 2021 à 11:07:29

Bonjour est-ce que tu peut nous montré ton code Javascript côté client qui ouvre la connexion au serveur ?

Le domaine ciblé par le socket et invalide:

http://file/socket.io/

En local il devrait ciblé:

http://localhost:{port}/socket.io

où éventuellement:

http://127.0.0.1:{port}/socket.io

Mais il serais étonnant que http://file soit un host local valide.

Sinon l'erreur qu'indique le navigateur:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Et qu'il na pas réussi à résoudre le nom de l'hôte de la requête http://file ne pointe définitivement nul part.

-
Edité par SamuelGaborieau3 16 juin 2021 à 21:08:23

Bonsoir,

merci pour ta réponse .

J'ai trouvé la raison du bug grâce à toi !!!

j'avais oublié le http:// dans le io.connect

voici mon code à présent

	<script src="socket.io.min.js"></script>

	<script type="text/javascript">
		
		var socket = io.connect('http://127.0.0.1:3000/');
	  // var socket = io();
	</script>

EDIT :

Je repasse par ici car j'ai de nouveau une erreur..

j'ai ceci

polling-xhr.js:202 GET http://localhost:3000/socket.io/?EIO=4&transport=polling&t=NePFdFM 404 (Not Found)

j'ai fais quelques modifications du côté du client

	<script src="socket.io.min.js"></script>

	<script type="text/javascript">
		
var socket = io.connect('http://localhost:3000/'); 
socket.on('connect', function() { console.log('Client connected'); });	  // var socket = io();
	</script>

concernant le serveur voici le code

const express = require("express");

const app = express();

const mysql = require("mysql");

const http = require('http');
const server = http.createServer(app);


app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  next();
});


app.use('/api/afficheur', (req, res, next) => {
  const afficheur = [
    {
      _id: 'oeihfzeoi',
      title: 'Mon premier objet',
      description: 'Les infos de mon premier objet',
      imageUrl: 'https://cdn.pixabay.com/photo/2019/06/11/18/56/camera-4267692_1280.jpg',
      price: 4900,
      userId: 'qsomihvqios',
    },
    {
      _id: 'oeihfzeomoihi',
      title: 'Mon deuxième objet',
      description: 'Les infos de mon deuxième objet',
      imageUrl: 'https://cdn.pixabay.com/photo/2019/06/11/18/56/camera-4267692_1280.jpg',
      price: 2900,
      userId: 'qsomihvqios',
    },
  ];
  res.status(200).json(afficheur);
});


server.on('connection', (socket) => {
  console.log('OK');
});


server.listen(3000, () => {
  console.log('listening on *:3000');
});

Ce que je constate c'est que la liaison avec le serveur se fais bien, mais ce que je ne comprend pas c'est d'où viens l'erreur 404 et pourquoi je n'ai pas de message client connected..

-
Edité par JulienOo 17 juin 2021 à 16:31:40

Bonjour il y à un problème avec le code côté serveur si tu nous à posté le code complet il manque l'implémentation du socket.io côté serveur tu ne l'as fait que côté client, c'est surement pour ça que tu as une erreur 404 lors de la requête ouverte par javascript vers:

http://localhost:3000/socket.io/?EIO=4&transport=polling&t=NePFdFM

Parce que /socket.io/ est une route qui n'existe pas sur ton application serveur c'est en implémentant le code côté serveur de socket.io que la route sera construite par la librairie.

Tu peut trouvé la documentation de la partie backend de socket.io

Tu peut trouvé un code d'exemple minimal (mais fonctionnel et commenté avec la partie client et serveur implémenté) sur github, ce projet d'exemple sur github à été publié par les mainteneurs de socket.io tu peut le retrouvé dans la partie démo de la documentation

Les lien ci-dessus doivent être suffisant pour monté un code minimal (et plus poussé) côté serveur, mais pour te donné une illustration de à quoi devrait ressemblé ton fichier serveur.js:

const express = require("express");
 
const app = express();
 
const mysql = require("mysql");
 
const http = require('http');
const server = http.createServer(app);

// importe le package
const socketIO = require('socket.io');

// construit le service (en passant le serveur en paramètre pour qu'il puisse ajouté des routes dessue)
const io = socketIO(server);


// écoute la connection d'un nouveau client:
// lors q'une requête type: <http://localhost:3000/socket.io/?EIO=4&transport=polling&t=NePFdFM>
// aboutira la connection du client sera écouté ici
io.on('connection', socket => {

	console.log("un nouveau client c'est connecté");
    
    // envoi une requête à tous les autres client connecté
    // côté client la requête et écoutable via:
    // socket.on('new client', function() ...);
    socket.broadcast.emit('new client');
    
    

});

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  next();
});
 
 
app.use('/api/afficheur', (req, res, next) => {
  const afficheur = [
    {
      _id: 'oeihfzeoi',
      title: 'Mon premier objet',
      description: 'Les infos de mon premier objet',
      imageUrl: 'https://cdn.pixabay.com/photo/2019/06/11/18/56/camera-4267692_1280.jpg',
      price: 4900,
      userId: 'qsomihvqios',
    },
    {
      _id: 'oeihfzeomoihi',
      title: 'Mon deuxième objet',
      description: 'Les infos de mon deuxième objet',
      imageUrl: 'https://cdn.pixabay.com/photo/2019/06/11/18/56/camera-4267692_1280.jpg',
      price: 2900,
      userId: 'qsomihvqios',
    },
  ];
  res.status(200).json(afficheur);
});
 
 
server.on('connection', (socket) => {
  console.log('OK');
});
 
 
server.listen(3000, () => {
  console.log('listening on *:3000');
});

Bonjour,

merci pour ta réponse !

Elle m'a permis de comprendre et de résoudre l'erreur.

À présent, je suis sur une nouvelle erreur que j'ai déjà eu sur ce projet.

Voici l'erreur :

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://127.0.0.1:3000/socket.io/?EIO=4&transport=polling&t=NeUGcwQ. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

j'avais résolu l'erreur avec ceci :

app.use(function(request, response, next) {
  response.header("Access-Control-Allow-Origin", request.headers.origin);
  response.header("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
  response.header("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,OPTIONS");
  response.header("Access-Control-Allow-Credentials", "true");
  next();
});

cependant apparemment cela ne fonctionne pas avec socket io ?

j'ai tenté de suivre la documentation sur ce lien.

j'ai donc remplacé la ligne

const socketIO = require('socket.io');

par

const socketIO = require("socket.io")(server, {
  cors: {
    origin: "*",
    methods: ["GET"]
  }
});

mais il me retourne que socketIO n'est pas une fonction..

Je ne comprend toujours pas trop comment résoudre l'erreur du coup..

Pourrais-tu m'expliquer cela ?

Merci beaucoup pour ton aide !

Edit :

Voici le code complet  :

// app.js
const express = require("express");
const app = express();

const cron = require('node-cron');


const mysql = require("mysql");

const http = require('http');
const server = http.createServer(app);

// importe le package
const socketIO = require('socket.io');



// construit le service (en passant le serveur en paramètre pour qu'il puisse ajouté des routes dessue)
const io = socketIO(server);


app.use(function(request, response, next) {
  response.header("Access-Control-Allow-Origin", request.headers.origin);
  response.header("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
  response.header("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,OPTIONS");
  response.header("Access-Control-Allow-Credentials", "true");
  next();
});


const db = mysql.createConnection({

 host: "localhost",

 user: "root",

 password: "",

 database: "affichage"

});
db.connect(function(err) {
 if (err) throw err;
 console.log("Connecté à la base de données MySQL!");
});

cron.schedule('* * * * *', function() 
{
 db.query("SELECT id, DATE_FORMAT(debut, '%Y/%m/%d %H:%m:%i') as debut, DATE_FORMAT(fin, '%Y/%m/%d %H:%m:%i') as fin, publication FROM planning", function(err, rows, fields) {
  if (err) throw err;
  console.log("Le résultat est : ", rows);
});
});



io.on('connection', socket => {
 
    console.log("un nouveau client c'est connecté");
     
    // envoi une requête à tous les autres client connecté
    // côté client la requête et écoutable via:
    // socket.on('new client', function() ...);
    socket.broadcast.emit('new client');
     
     
 
});



server.on('connection', (socket) => {
  console.log('OK');
});
  
  
server.listen(3000, () => {
  console.log('listening on *:3000');
});


module.exports = app;

Bonjour mettre le CORS sur '*' et le plus permissif puisque il accepte les requêtes venant de n'importe quelle origine (pour le dev en local c'est suffisant)

app.use(function(request, response, next) {
  response.header("Access-Control-Allow-Origin", '*');
  response.header("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
  response.header("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,OPTIONS");
  response.header("Access-Control-Allow-Credentials", "true");
  next();
});
 

Ce morceau de code:

const socketIO = require("socket.io")(server, {
  cors: {
    origin: "*",
    methods: ["GET"]
  }
});

Te retourne que socketIO n'est pas une fonction parce que tu l'as exécuté immédiatement à l'appel la fonction retourné par le package si tu veut le faire en 2 fois pour avoir le résultat dans io comme dans le code précédent tu peut l'écrire comme cela:

const socketIO = require("socket.io");
const io = socketIO(server, {
  cors: {
    origin: "*",
    methods: ["GET"]
  }
});

La première erreur que tu obtient avec:

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://127.0.0.1:3000/socket.io/?EIO=4&transport=polling&t=NeUGcwQ

Et très certainement parce que ton application client tourne sur un port de communication différent de l'application serveur (qui et actuellement sur le port 3000) les port de communication font partie du nom de l'hôte quand le serveur reçoit un requête de: http://localhost:80 (en admettant que l'application client et sur le port 80) il considère que c'est un hôte différent de http://localhost:3000 

C'est pour cela que mettre le CORS sur '*' via

Access-Control-Allow-Origin: *

dans les en tête de réponse du serveur, règle le problème en acceptant les requêtes depuis toutes les origines.

Plus d'informations sur l'en tête Access-Control-Allow-Origin

Plus d'informations sur le partage de ressources entre plusieurs origin

-
Edité par SamuelGaborieau3 20 juin 2021 à 7:40:56

merci pour ta réponse.

J'ai réussi à corriger le bug en remplaçant ces lignes : 

app.use(function(request, response, next) {
  response.header("Access-Control-Allow-Origin", request.headers.origin);
  response.header("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
  response.header("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,OPTIONS");
  response.header("Access-Control-Allow-Credentials", "true");
  next();
});

par ceci :

const io = socketIO(server, {
  cors: {
    origin: "*",
    methods: ["GET"]
  }
});

aurais-tu une explication ? Je ne comprend pas trop comment cela corrige le bug..
J'ai une seconde question à te poser.

Pour faire fonctionner mon script (qui se trouve dans une extension) depuis n'importe qu'elle page web.

Pour cela j’avais utiliser la ligne suivante :

  response.header("Access-Control-Allow-Origin", request.headers.origin);

Je me suis rendu sur les liens que tu as mis mais je n'ai pas trouvé de piste..

Pourrais-tu m'en donner une ?

-
Edité par JulienOo 20 juin 2021 à 11:16:09

Up stp

j'ai trouvé, voici ce que j'ai fais

// construit le service (en passant le serveur en paramètre pour qu'il puisse ajouté des routes dessue)
const io = socketIO(server, {
  allowEIO3: true, // false by default
  cors : {
    origin: function (origin, callback) {
      callback(null, true)
    },
    credentials: true,
}
});