0
votes

Erreur Socket.io cors en utilisant node, react et socket.io

Nous utilisons CORS pour autoriser toutes les origines

  constructor(props) {
    super(props);
    try {
      this.socket = io("http://localhost:4000", { transport: ["websocket"] });

      this.socket.on("Chat-event", data => {
        console.log("socketdata", data);
      });
    } catch (error) {
      console.log("hiterror", error)
    }
  }

serveur fonctionnant sur le port 4000 et client fonctionnant sur 3000

voici mon code server.js

const cors = require("cors");
const http = require("http");
const socketIO = require("socket.io");

app.use(cors());

const port = process.env.PORT || process.env.DEFAULT_PORT;
console.log("port: ", port);
app.listen(port, () => {
  console.log(`App listening at ${port}...`);
});

const server = http.createServer(app);

const io = new socketIO(server, {
  transports: ["websocket"],

});

Code js de réaction

app.use(cors());

J'obtiens continuellement cette erreur du côté client après avoir autorisé l'origine pour tous.

L'accès à XMLHttpRequest sur ' http: // localhost: 4000 / socket.io /? EIO = 3 & transport = polling & t = Mv-SSIc ' from origin ' http: // localhost: 3000 ' a été bloqué par la stratégie CORS: La valeur de L'en-tête 'Access-Control-Allow-Origin' dans la réponse ne doit pas être le caractère générique '*' lorsque le mode des informations d'identification de la demande est 'include'. Le mode d'informations d'identification des demandes initiées par XMLHttpRequest est contrôlé par l'attribut withCredentials

reactjs node.js sockets

2 commentaires

consultez ce stackoverflow.com/questions/24058157/...

Toujours la même erreur

3 Réponses :

0
votes

essayez d'utiliser la configuration des informations d'identification cors:

app.use(cors({credentials: true}));

1 commentaires

n'a fait aucune différence

0
votes

Veuillez autoriser tous à socket.io côté serveur

socketIO.set('origins', '*:*');

Ou vous pouvez définir les origines socketIO comme *

const socketIO = require('socket.io')(server, { origins: '*:*'});

4 commentaires

Cela ne fait aucune différence, rappelez-vous que j'utilise socket.io version 2.2.0 pour le client et le serveur

avez-vous vérifié votre fichier .htaccess? peut-être que ça vous aide

d'où puis-je y accéder?

Veuillez vérifier votre application serveur >> et ajouter l'en- Header add Access-Control-Allow-Origin "*" Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

0
votes

Pour la configuration des cors de socket.io version 3.xx a changé, j'ai réussi à le corriger en ajoutant des options à la création de socket. J'ai essayé la version 2.xx également et cela a fonctionné.

  const io = socketio(httpServer, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
    credentials: true
  }
});

Voici la ressource https://socket.io/docs/v3/handling-cors/

Bonus : au cas où vous rencontriez une mauvaise requête, assurez-vous d'avoir la même version de socket.io pour le client et le serveur.

0 commentaires