CODEWITHSUNDEEP
socketsvue.jssocket.iocloudflare
Tobias Thiele
Tobias Thiele

Reputation: 43

Vue.JS + Socket.IO & Cloudflare

Im trying to run a website with socket.io Vue-Socket.io and want to enable DDOS protection from cloudflare. As I know cloudflare supports websocket-servers such as socket.io. After I enabled cloudflare successfully and changed the ports of my socket-connection, the google dev console tells me:

Failed to load http://my-domain.com:2083/socket.io/?EIO=3&transport=polling&t=M9uD7PJ: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my-domain.com.com' is therefore not allowed access. The response had HTTP status code 400.

Someone can tell me what I have to change?

PS: Im working with the vuejs-cli

Upvotes: 1

Views: 1354

Answers (2)

Tobias Thiele
Tobias Thiele

Reputation: 43

I played around with some of the examples of @acdcjunior and found a solution finally.

On my server I implemented:

io.set('origins', 'http://my-domain.com:*');

For the clients I connect to the socket server:

export const SocketInstance = socketio('my-domain.com:2082');

don't ask me why, but I tried and tried around for about 7 Hours.. love programming :)

Upvotes: 0

acdcjunior
acdcjunior

Reputation: 135812

This is a CORS issue.

In your socket.io server, add the configuration to enable CORS: server.origin().

In your case:

io.set('origins', 'http://my-domain.com:2083');

Again this is a server-side issue, it is just being reflected in Vue. But there's nothing Vue (or the client-side) can do about it.

Upvotes: 1

Related Questions