1

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

Tobias Thiele
  • 41
  • 1
  • 8
  • You have to enable [CORS](https://stackoverflow.com/questions/19821753/jquery-xml-error-no-access-control-allow-origin-header-is-present-on-the-req/19821851#19821851) in your server. This is a change you must do **server-side**. – acdcjunior Mar 30 '18 at 19:19
  • @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 Mar 30 '18 at 19:26
  • I haven't, but cloudflare shouldn't be much different from other hosts... – acdcjunior Mar 30 '18 at 19:34

2 Answers2

1

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.

acdcjunior
  • 132,397
  • 37
  • 331
  • 304
  • we found out, that we have to use our IP instead of my-domain.com to make it work. But now we have our IP-Address in our client side JS-code. Is there any way to hide our IP from the client? – Tobias Thiele Mar 30 '18 at 20:36
  • Hum... I don't think you would need to use the IP. `origins` must be the address where the Vue application is running at (the address at the browser's address bar). So you wouldn't need to hide the address, because it is the host (say `mycompany.com`) where your app is at. If you are needing to place the IP there, then your app must be running with that IP in the address bar (like `http://156.56.28.11:123/myvueapp`), which, again, wouldn't make sense for you to hide. Or... are you running it inside an iframe of some sort? – acdcjunior Mar 30 '18 at 20:41
  • Well I use a normal .com Domain from namecheap and the nameserver point to cloudflare. When I get the IP behind my domain I get an other IP (makes sense because cloudflare protects my real IP). So I really don't whats going on there. – Tobias Thiele Mar 30 '18 at 20:50
  • Suppose your user accesses your vue app via `https://nicefoo.com:123/vue`. When the user looks at the address bar, it sees that address, yes? Now, the address that should be configured in io is that one, like: `io.set('origins', 'https://nicefoo.com:123');`. – acdcjunior Mar 30 '18 at 20:54
  • The only exception to that is if cloudflare creates some sort of iframe and serves your app from within that iframe. In this case, you'd have to add to `io` the address where this iframe is at. – acdcjunior Mar 30 '18 at 20:57
  • I looked at a similar page and looked in the Network Tab in chrome. I see that they connect to their socket via http://their-domain.com/socket.io/?EIO=... instead of using a port. How do they handle it? – Tobias Thiele Mar 30 '18 at 21:33
  • The address that must be on `io.set('origins', '...');` is the one that the client actually opens a connection with, regardless of any proxying in between. In this similar page you mention, their server should return `io.set('origins', 'http://their-domain.com:*');`. – acdcjunior Mar 30 '18 at 21:54
  • I don't know how, but it should work now.. will write what I did by answering my own question. Thanks for your time and the helpfully comments :) – Tobias Thiele Mar 30 '18 at 23:07
0

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

Tobias Thiele
  • 41
  • 1
  • 8