wss://my.domain.com/sockjs/362/4q059yw7/websocket

Question

I need help in fixing this issue.

I am trying to implement ssl to the domain my.domain.com

Front end is Angular and Backend is Meteor

I was able to create ssl certificates properly and was able to get Secure https label on loading the domain, but the page was not rendering because of the error

Uncaught TypeError: a._qs.unescape is not a function

from the build file in the .build/dist/bundle/programs/web.browser

Request URL:https://my.domain.com/5a0c202b90aa3cc1c9414b703c4e1f343fb0dd4e.js?meteor_js_resource=true

Below websocket request will remain pending with status 101

wss://my.domain.com/sockjs/362/4q059yw7/websocket

I have not written any code on Meteor to run it to https, I am trying to handle through nginx. From angular after adding ssl certificates trying to connect to meteor throughwss://localhost/ instead of ws://localhost:3000/

Please find my nginx file below.

events {    
}

http {
  server {
     listen 80;
     listen [::]:80 default_server ipv6only=on;
     server_name  my.domain.com;
     root   /client;
     index  index.html;

     location / {
        rewrite     ^ https://$server_name$request_uri? permanent;
     }
}

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

 server {
    # Enable HTTP/2
     listen 443 ssl http2;
     listen [::]:443 ssl http2;
     server_name  my.domain.com;

     root   /client;
     index  index.html;
     ssl_certificate /etc/letsencrypt/live/my.domain.com/fullchain.pem; # managed by Certbot
     ssl_certificate_key /etc/letsencrypt/live/my.domain.com/privkey.pem; # managed by Certbot
     ssl_dhparam /etc/ssl/certs/dhparam.pem;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade; # allow websockets
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-Forwarded-For $remote_addr;
    }

    location /api {
        proxy_pass http://localhost:3000;
    }

    location /uploadFile {
        proxy_pass http://localhost:3000;
    }

    error_page   500 502 503 504  /50x.html;
    location = /51x.html {
        root   /client;
    }
  }  
}

Any leads would be appreciated.

Dayan

Did all your scripts load? Feels like there's a js file that didn't get loaded properly. Does the debugger show any 404s during page load? – Councilwoman

No 404 error messages, but the in the network tab websocket status would always remain as pending. If proxy settings from nginx file, then I dont get 'Uncaught TypeError: a._qs.unescape is not a function' error – Dayan

Did I make any mistake in nginx ? Nginx file works fine without proxy settings for wws connection – Dayan

I'm confused about the NGINX rule you have here. Is this the whole thing? There should be one part for Meteor and another for Angular. – Varicose

Answer 1

I figured out the issue I had. Issue was in below line in nginx.

 proxy_pass http://localhost:3000;

I fixed it by redirecting it to http://localhost:3000/websocket; and location as location /websocket

Snippet is below.

location /websocket {
   proxy_pass http://localhost:3000/websocket;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade; # allow websockets
   proxy_set_header Connection $connection_upgrade;
   proxy_set_header X-Forwarded-For $remote_addr;
}

Dayan