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.
