Vue.JS + Socket.IO & Cloudflare

1
votes

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

2
socketsvue.jssocket.iocloudflare
You have to enable CORS in your server. This is a change you must do server-side. - acdcjunior
@acdcjunior Ok I'll talk to our server administrator. Have you ever set up vuejs in combination with socket.io and cloudflare successfully? - Tobias Thiele
I haven't, but cloudflare shouldn't be much different from other hosts... - acdcjunior

2 Answers

1
votes

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.

0
votes

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 :)