-1

Estou desenvolvendo uma aplicação de chat em tempo real, usando ReactJs no front-end e Node.js no back-end. Configurei o servidor Node com Socket.io para a aplicação. Ao entrar na página do chat em si, ele deve se conectar ao servidor em questão. No entanto, ao tentar se conectar o console retorna o erro:

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=4&transport=polling&t=Nhg2TfS' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. polling-xhr.js:198

e logo abaixo:

GET http://localhost:5000/socket.io/?EIO=4&transport=polling&t=Nhg2TfS
net::ERR_FAILED

O lado do cliente roda na porta 3000 e o servidor na porta 5000 do localhost.

Estou usando

  • Cors v2.8.5
  • Express v4.17.1
  • Nodemon v2.0.12
  • Socket.io v4.1.3

Arquivo index.js Server Side

const express = require('express');
const socketio = require('socket.io');
const http = require('http');
const cors = require('cors');

const PORT = process.env.PORT || 5000;

const router = require('./router');

const app = express();
const server = http.createServer(app);
const io = socketio(server);

io.on('connection', (socket) => {
    console.log('Novo usuário conectado!');

    socket.on('disconnect', () => {
        console.log('Usuário desconectado!');
    })
});

app.use(cors());
app.use(router);

server.listen(PORT, () => console.log(`Server has started on port ${PORT}`));

Arquivo index.js - Client Side

import React, { useState, useEffect } from 'react';
import queryString from 'query-string';
import io from 'socket.io-client';

let socket;

const Chat = ({ location }) => {
    const [name, setName] = useState('');
    const [room, setRoom] = useState('');
    const ENDPOINT = 'localhost:5000';

    useEffect(() => {
        const { name, room } = queryString.parse(location.search);

        socket = io(ENDPOINT);
        
        setName(name);
        setRoom(room);

        console.log(socket);
    });

    return (
        <h1>Chat</h1>
    );
}

export default Chat;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Gostaria que me ajudassem a resolver esse erro, por favor.

2 Respostas 2

2

Opa, tenta adicionar isso no seu socket:

export const io = socketio(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
})

Se não deu, eu diria pra você fazer um outro server http só pro socket em outra porta assim:

import { createServer } from 'http'
import socketio from 'socket.io'

const socket = createServer()
export const io = socketio(socket, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
})

io.on('connection', (socket) => {
    console.log('Novo usuário conectado!');

    socket.on('disconnect', () => {
        console.log('Usuário desconectado!');
    })
});

socket.listen(4000)
1
  • Obrigado, a primeira opção funcionou ;) 28/07/2021 às 0:38
-1

É porque você está acessando com localhost, já existe uma solução para isso. Tente instalar esta extensão no chrome para modificar o header Access-Control-Allow-Origin https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .