Socketio com Typescript

Question

I am trying to make a Altime application with express ( 4.17.1"), Node (10.12.0) using typescript.

Only in the socket that is giving Cors problem

Access to Xmlhttprequest at 'http://localhost:3000/socket.io/? EIO=3&transport=polling&t=Mo_nwph' from origin 'http://localhost:4200' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the Response must not be the wildcard '*' when the request’s credentials mode is 'include'. The credentials mode of requests initiated by the Xmlhttprequest is Controlled by the withCredentials attribute.

My configuration class is this one

class Aplicaccao {
    app: express.Application
    port = 3000
    private io: SocketIO.Server
    private server: Server;
    constructor(){
        this.app = express()
        this.server = createServer(this.app);
        this.io = socketIo(this.server);
    }
    listen(){

        this.middleware()
        this.realtime()
        this.routes()

        this.app.listen(this.port, ()=>{
            console.log(`System is listening on port ${this.port}`);            
        })
    }

    middleware(){
        this.enableCors()
        this.app.use( bodyParser.json() )
        this.app.use( bodyParser.urlencoded( {extended: true} ) )
    }
    enableCors(){
        const options: cors.CorsOptions = {
                            "origin": "*",
                            "methods": "*",
                            "preflightContinue": false,
                            "optionsSuccessStatus": 200
                        }
        this.app.use(cors(options))           
    }
    realtime(){
        this.io.on('connect', socket =>{
            console.log('socket',socket);

            socket.on('read', msg =>{
                socket.broadcast.emit('read', msg)
            })
        })
    }

    routes(){
        this.app.get('/', (req, res)=>{
            res.send({obs: 'Bem vindo a api do Sistema de Notificações'})
        })
        this.app.use('/api', ...routes)
    }
}

export const server = new Aplicaccao()

The call at the angle is like this:

this.socket = io( 'http:localhost:3000' )

And in javascript like this:

var socket = io('http://localhost:3000')

How can CORS problem if other API modules work: Query, Insert, update?

Where can I be missing?

Answer 1

Friend, to give this error you must be using XMLHttpRequest.withCredentials as TRUE (generally uses this property as true when you need to send a cookie).
To solve your problem you can pass this property as FALSE, if you do not need to send cookies.
Now, if you really need to use XMLHttpRequest.withCredentials as TRUE, you must add the source domain you want to allow, and not pass * because it gets very permissive and gives this mistake.
Change this piece of code to:

const options: cors.CorsOptions = {
  //Ou altere o http://localhost:3000 para o protocolo+dominio+porta de onde esta vindo as requisições.
  "origin": "http://localhost:3000", 
  "methods": "*",
  "preflightContinue": false,
  "optionsSuccessStatus": 200
}