Meteor WebSocket connection to 'ws://.../websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

Question

I am brand new to things like Meteor.JS, and was wondering about this error. I started the test project (with the button click meter) and it works, but then I go into the console and see WebSocket connection to 'ws://shibe.ninja/sockjs/243/5gtde_n9/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400 I don't know how to fix it. Thanks

Answer 1

Maybe a little late but in case you still stuck on this. I got the same issue when deploying the app and using nginx as proxy.

location / {
     proxy_pass http://127.0.0.1:3000;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection "Upgrade";
}

Check also the nginx docs here: http://nginx.com/blog/websocket-nginx/

Answer 2

I bumped into this problem myself, but I already had my proxy headers set correctly and it was still not working. But apparently Cloudflare is causing issues. Here is a great article on the subject: https://meteorhacks.com/cloudflare-meets-meteor

As far as I've found, there are three solutions:

Option 1: Use CloudFlare enterprise, which supports sockets.

Option 2: Disable Meteor WebSockets, which will affect your performance as it fallbacks back to use sock.js as a replacment. To do this, just set your meteor environment like this:

export DISABLE_WEBSOCKETS=1

Option 3: In Cloudflare, create a ddp subdomain for the websocket (ddp.yourdomain.com), then disable Cloudflare on the new subdomain. After that set your meteor environment like this:

export DDP_DEFAULT_CONNECTION_URL=http://ddp.example.com

After this my nginx config needed some adjustments, as this has now become a cross-origin (CORS) setup. This is my new nginx config:

map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

server {
  listen 80 proxy_protocol;
  listen [::]:80 proxy_protocol;

  server_name mydomain.com ddp.mydomain.com;

  ## This allows the CORS setup to work
  add_header Access-Control-Allow-Origin 'http://example.com';

  ## This hides the CORS setup from the Meteor server
  ## Without this the header is added twice, not sure why?
  proxy_hide_header Access-Control-Allow-Origin;

  ## Idealy the two options above should be disabeled,
  ## Then use this one instead, but that caused issues in my setup.
  # proxy_set_header Access-Control-Allow-Origin 'http://example.com';

  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host; # pass the host header
    proxy_set_header Upgrade $http_upgrade; # allow websockets
    proxy_set_header Connection $connection_upgrade;
    proxy_set_header X-Real-IP $remote_addr; # Preserve client IP
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_http_version 1.1;

    # Meteor browser cache settings (the root path should not be cached!)
    if ($uri != '/') {
      expires 30d;
    }
  }
}

Finally, remember to restart nginx.