Question

Allow Cors Origin for Node/Angular API on nginx

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.

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer