How I can handle CORS on client-side

[iandreiev]

I have a problem with connection to my server, which located at localhost:8080 I got the error with followeing message: Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NO51tSB' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Server-side code: const io = require("socket.io")(http, { cors: { origin: "http://localhost:8080", methods: ["GET", "POST"] } }); Client-side code: Vue.use(new VueSocketIO({ debug: true, connection: '//localhost:3000/', }))

[zemunkh]

I faced, too. I think it's because Version 3. Did you find a workaround?

[CarlosWosiak]

I am having this problem in version 2

[vaneetjoshi]

i had this same issue but i solved it by following these steps

1=> in server side code update your connection and allow cors origin to *

io = require('socket.io')(httpServer, {
      cors: {
        origin: '*',
      }
    });

2 => Instead of connection string you must provide socket.io connection object

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

/* Establish Connection */
const socketConnection = SocketIO('http://localhost:3000');

Vue.use(new VueSocketIO({
    debug: true,
    connection:socketConnection 
  })
);

Hope this works for you as well

[fluxo27]

same problem, it works with socket.io version 2.3.0 on the server

[zemunkh]

Current workaround for me was to use:

On server: socket.io ^2.0.4

On client side (Vue app): vue-socket.io: ^3.0.10 socket.io-client: ^2.0.4

[stefa168]

If it can be of any help, I had the same problem and I fixed it by:

• Updating at least socket.io on the clientside, like @zemunkh said, to at least version 3.0
• Following the socket.io 3.0 documentation

[khtodod]

i had this same issue but i solved it by following these steps

1=> in server side code update your connection and allow cors origin to *

io = require('socket.io')(httpServer, {
      cors: {
        origin: '*',
      }
    });

2 => Instead of connection string you must provide socket.io connection object

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

/* Establish Connection */
const socketConnection = SocketIO('http://localhost:3000');

Vue.use(new VueSocketIO({
    debug: true,
    connection:socketConnection 
  })
);

Hope this works for you as well

Works like a charm :).

[rueGooner]

So I have version 3.0.10 and this issue is still happening...

Any suggestions?

[iandreiev]

i had this same issue but i solved it by following these steps

1=> in server side code update your connection and allow cors origin to *

io = require('socket.io')(httpServer, {
      cors: {
        origin: '*',
      }
    });

2 => Instead of connection string you must provide socket.io connection object

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

/* Establish Connection */
const socketConnection = SocketIO('http://localhost:3000');

Vue.use(new VueSocketIO({
    debug: true,
    connection:socketConnection 
  })
);

Hope this works for you as well

Thank's a lot)

[jonnycraze]

I'm having the same issue with this, I downgraded my socket.io to ^2.04 and it is now working, but I'd really rather use the latest socket.io version

I went through the docs and tried setting cors like this: const io = require('socket.io')(server, { cors: { origin: '*', } });

However the CORS issue persists when connecting from the client: import * as io from "socket.io-client"; import VueSocketIO from "vue-socket.io";

const socketEndpoint = (process.env.NODE_ENV === 'development') ? 'http://localhost:9991' : 'https://livesite.com'; Vue.use(new VueSocketIO({ debug: true, connection: io(socketEndpoint), // options object is Optional }), );

If there are any suggestions to try I would be greatly appreciative, I feel like I'm missing something small here.

[agabardo]

Current workaround for me was to use:

On server: socket.io ^2.0.4

On client side (Vue app): vue-socket.io: ^3.0.10 socket.io-client: ^2.0.4

This worked for me.

[CraciunVladVirgil]

any fix for this?

[airtimestudio]

i had this same issue but i solved it by following these steps 1=> in server side code update your connection and allow cors origin to *

io = require('socket.io')(httpServer, {
      cors: {
        origin: '*',
      }
    });

2 => Instead of connection string you must provide socket.io connection object

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

/* Establish Connection */
const socketConnection = SocketIO('http://localhost:3000');

Vue.use(new VueSocketIO({
    debug: true,
    connection:socketConnection 
  })
);

Hope this works for you as well

Works like a charm :).

this worked for me, many thanks! you're a hero. i spend 3 hours figuring this out until i found your post.