Allow Cors Origin for Node/Angular API on nginx

October 14, 2018 3.2k views
Nginx Node.js Ubuntu 18.04

Hi guys,

I know this can be interpreted like a repost but i try so hard for several days until now to make this work.

I'm absolutly not an expert in hosting web application this is why i read lot of tutorial, videos and every sources who can help me. After days to read in this forum, stackoverflow and other ressources without be capable to make this work, i have concluded that i'm definitivly need help.

I have to specify all my web application work fine in developement mode.

Here is my Nginx Block:

upstream btb {
  server 127.0.0.1:3000;
}

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

        root /var/www/mydomain.com/html/AngularBee/dist;
        index index.html index.htm index.nginx-debian.html;

        server_name mydomain.com www.mydomain.com;

        location / {

                try_files $uri $uri/ /index.html;

                proxy_set_header 'Access-Control-Allow-Origin' '*';
                proxy_set_header 'Access-Control-Allow_Credentials' 'true';
                proxy_set_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                proxy_set_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

                proxy_pass http://btb;
                proxy_http_version 1.1;

                proxy_set_header Connection 'upgrade';
                proxy_set_header Upgrade            $http_upgrade;
                proxy_set_header Host               $host;
                proxy_set_header X-NginX-Proxy      true;
                proxy_cache_bypass                  $http_upgrade;
                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;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomain.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


}

#Generate by Certbot
server {

    if ($host = www.mydomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = mydomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        return 404; # managed by Certbot
}```

Here is the entry point of my application:

'use strict';
const
      express     = require('express'),
      path        = require('path'),
      http        = require('http'),
      bodyParser  = require('body-parser'),
      mysql       = require('mysql'),
      dotenv      = require('dotenv').config(),
      cors        = require('cors');


module.exports = () => {
    let server = express(),
        create,
        start;

    create = (config) => {
       //Allow cors origin
        server.use(cors());
        let routes = require('./routes/index');

        //Server settings
        server.set('env', config.env);
        server.set('port', config.port);
        server.set('hostname', config.hostname);

        //Middleware that parses json
        server.use(bodyParser.json({limit: '50mb', extended: true}));
        server.use(bodyParser.urlencoded({ limit:'50mb', extended: true}));

        // Point static path to dist
        server.use(express.static('dist'));

        // Catch all other routes and return the index file
        server.get('/', (req, res) => {
          res.sendFile("index.html", {"root": 'C:/dev/myproject/dist'});
        });

      server.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Methods", 'GET, PUT, PATCH, POST, DELETE');
        res.header("Access-Control-Allow-Headers", "Content-Type");
        next();
      });

        //Set up routes by deferring that responsibility to the index.js within the routes folder.
        routes.init(server);

        const connection = mysql.createConnection({
          host     :  config.hostname,
          user     :  config.user,
          password :  config.password
        });

        connection.connect( (error) => {
          if(error){
            console.log('Error Connexion to database');
          }else{
            console.log('Connected to Database');
          }
        });
    };

    start = () => {
         let hostname = server.get('hostname'),
             port = server.get('port');

         server.listen(port, () => {
             console.log('Express server listening on - http://' + hostname + ':' + port);
         });
    };

    return{
      create: create,
      start: start
    }
};

And finaly this is my error:

ERROR 
{…}
​
error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … }
​
headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) }
​
message: "Http failure response for (unknown url): 0 Unknown Error"
​
name: "HttpErrorResponse"
​
ok: false
​
status: 0
​
statusText: "Unknown Error"
​
url: null
​
<prototype>: Object { constructor: e()
 }```

Notice me if i forget something important, any help would be appreciated, thx.
1 Answer

Looks like the issue is quite complicated. You know what, I've just finished an article about angular 2 vs vuejs (click on this link) and the company which runs this blog seems to be a good one which can cope even with the most complicated tasks so you can contact them and maybe they'll help.

Have another answer? Share your knowledge.