Home / server / Questions

Questions[angular](server)

Martin Hope
Venomoustoad
Asked: 2021-07-29 23:38:17 +0800 CST
  • 1

So I have been running my front end on the server for a few weeks now(angular Server Side rendering). I keep running into this issue where the front end goes down to a 502 error. I have to restart the server ever few hours to ensure that it is back up. The traffic is not crazy and everything seems to be fine(in my console logs- no errors etc) until the point it suddenly goes down. the moment I restart the ssr server, it works fine again. I use the universal library that is the standard for server side rendering in Angular. What could be the issue? what do I need to monitor? RAM? CPU? Something else?

502-error angular
Martin Hope
Satish Umagol
Asked: 2021-01-21 21:12:17 +0800 CST
  • 1

I am using Angular8 as frontend and Nodejs as backend

I have Configured WSS on production ,but connection with client not working properly, In one page connection is working but in another page connection not working.

websocket and server is running on same port

Everything working fine with Ws(localhost)

package we are use in backend

https://www.npmjs.com/package/ws

Back-end code:

express = require('express');
app = express();
const http = require('http');
const port = 8080;
const fs = require('fs');
const certificate = {
 cert: fs.readFileSync(''),
 key: fs.readFileSync('')
}
const httpServer = http.createServer(app,certificate);

var server = require('ws');

var s =  new server.Server({ server:httpServer },{
  rejectUnauthorized: false
});
s.on('connection', function (ws) {
    ws.on('message', function (message) {
         var obj = JSON.parse(message);
          if (obj.messagetype == "test") {
              //send data
            }     
    }
}

httpServer.listen(port);

Front-end code

export class WebsocketService {
constructor() { }
private subject: Rx.Subject<MessageEvent>;

public connect(url): Rx.Subject<MessageEvent> {
  if (!this.subject) {
    this.subject = this.create(url);
  }
 return this.subject;
}

private create(url): Rx.Subject<MessageEvent> {
  let ws = new WebSocket(url);

  let observable = Rx.Observable.create((obs: Rx.Observer<MessageEvent>) => {
   ws.onmessage = obs.next.bind(obs);
   ws.onerror = obs.error.bind(obs);
   ws.onclose = obs.complete.bind(obs);
 return ws.close.bind(ws);
});
  let observer = {
  next: (data: Object) => {
   if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify(data));
    }
  }
 };
  return Rx.Subject.create(observer, observable);
  }
 }

const CHAT_URL = "wss://cen.abcuae.com/";

export class SockoneService {

public messages: Subject<Message>;
public messages2: Subject<Message>;

constructor(wsService: WebsocketService) {
 this.messages = <Subject<Message>>wsService.connect(CHAT_URL).pipe(map(
   (response: MessageEvent): Message => {
     let data = JSON.parse(response.data);
     return data;
   }));
   this.messages2 =  this.messages;
 }

here is configuration under /etc/nginx/sites-available/default

server {

listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/cen.abcuae.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/cen.abcuae.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

server_name cen.abcuae.com;

location / {
    
            proxy_pass http://0.0.0.0:8080; #whatever port your app runs on
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            proxy_read_timeout 3600; 

} 
}
server {
listen 443;
listen [::]:443 ssl;

 server_name cen.abcuae.com;
    ssl_certificate /etc/letsencrypt/live/cen.abcuae.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/cen.abcuae.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by C


location /websocket {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  
  proxy_set_header Host $host;
  proxy_pass https://cen.abcuae.com:5000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}
}
ssl nginx node.js websocket angular
Martin Hope
glass
Asked: 2020-11-06 08:44:13 +0800 CST
  • 2

Several questions for the same topic on the net but nothing worked.

I have a serverXYZ running an Angular app, a backend tomcat webapp for authentication, a nginx server. Angular app on port 4200, tomcat app on 8080. Everything is on the same host.

The angular app has a environment.ts file (the commented string is one of my tests, see nginx conf below):

export const environment = {
  production: false,
//  apiUrl: 'http://serverXYZ:444/api'
  apiUrl: 'http://localhost:8080/backend'
};

The nginx conf:

    server {
        listen 444;
    
            server_name serverXYZ;

            location / {
                    proxy_pass http://localhost:4200;
                    
                    //websocket
                    proxy_set_header HOST $host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_set_header X-Forwarded-Proto $scheme;
                    proxy_pass_request_headers on;
                    proxy_http_version 1.0;
                    proxy_set_header Upgrade $http_upgrade;
                    proxy_set_header Connection "Upgrade";
                    proxy_read_timeout 120s;
            
                    if ($request_method = 'OPTIONS') {
                            add_header 'Access-Control-Allow-Origin' '*';
                            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                            add_header 'Access-Control-Max-Age' 1728000;
                            add_header 'Content-Type' 'text/plain; charset=utf-8';
                            add_header 'Content-Length' 0;
                            return 204;
                    }
                    if ($request_method = 'POST') {
                            add_header 'Access-Control-Allow-Origin' '*';
                            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
                    }
                    if ($request_method = 'GET') {
                            add_header 'Access-Control-Allow-Origin' '*';
                            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
                    }
    
            }

            location /api {
                proxy_pass http://localhost:8080/backend;

                if ($request_method = 'OPTIONS') {
                        add_header 'Access-Control-Allow-Origin' '*';
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                        add_header 'Access-Control-Max-Age' 1728000;
                        add_header 'Content-Type' 'text/plain; charset=utf-8';
                        add_header 'Content-Length' 0;
                        return 204;
                }
                if ($request_method = 'POST') {
                        add_header 'Access-Control-Allow-Origin' '*';
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
                }
                if ($request_method = 'GET') {
                        add_header 'Access-Control-Allow-Origin' '*';
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
                }

           }
}

The backend tomcat app has this in its web.xml:

...
<!-- Tomcat built in CORS implementation -->
        <!--  https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html -->
        <filter>
                <filter-name>CorsFilter</filter-name>
                <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
                <init-param>
                        <param-name>cors.allowed.headers</param-name>
                        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization</param-value>
                </init-param>
                <init-param>
                    <param-name>cors.allowed.methods</param-name>
                    <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
                </init-param>
        </filter>
        <filter-mapping>
                <filter-name>CorsFilter</filter-name>
                <url-pattern>/*</url-pattern>
        </filter-mapping>
        <!-- End of built in CORS implementation -->
...

I use my computer, open the browser, With the described conf if I connect to http://serverXYZ:444 the app shows up but I get CORS error on authentication (Failed CORS request). If instead I use the configuration with the commented string in environment.ts , the browser authentication doesn't say CORS, just 403. Of course the authentication api is tested and working.

I'm clueless, what's wrong? Also, solving this with nginx is my preferred way but not mandatory.

Edit: I add one more info, I'm launching the angular app with "ng serve --disableHostCheck=true" . I don't know if maybe the "--publicHost" option or "--host 0.0.0.0" should be used in this case?

Edit 2: Another thing I see just now, Firefox doesn't give me any error on OPTIONS request, just Cors on POST.

nginx cors angular
Martin Hope
Leo
Asked: 2020-06-30 09:57:47 +0800 CST
  • 2

I have built an Angular app and created a docker image, which makes it run on an Nginx server (once it is run). For the backend, I have a dockerized implementation as well. While trying to access the data from the backend, I face the error with regard to CORS policy-related, such that on the browser I see the following: "...has been blocked by CORS policy: No "Access-Control-Allow-Origin" header is present..."

In order to solve the problem, I tried different configuration changes within the Nginx server, for example: (1) setting the add_header "Access-Control-Allow-Origin" "http://0.0.0.0:8080", (2) trying similar change while on the proxy-side, proxy_set_header "Access-Control-Allow-Origin" "http://0.0.0.0:8080", etc. But none of them worked (Note, with "http://0.0.0.0:8080" referring to the backend, whereas to the Angularhaving access through "http://0.0.0.0:7000").

An example of how my configuration file looks like is given in the following:

server { 
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri /index.html = 404;
    }

    location /api {
         proxy_pass http://0.0.0.0:8080;
         proxy_set_header "Access-Control-Allow-Origin" "http://0.0.0.0:8080"
     }
}

Could please any of you share any idea of how to solve this issue?

Thanks!

nginx docker springboot cors angular