CORS in angular and node application not working - node.js

Question

I am facing some problems in my (Dockerized) Angular application.
During the loading on Edge/Firefox of my angular application all Request (RestApi) needed to fill my homepage don't arrive to my application. If I load the same page with Chrome all requests arrived and the page is then filled.
The server.js of my Angular application is:
var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
var http = require('http');
var https = require('https');
var cors = require('cors');
var mongoose = require('mongoose');
var qs = require('querystring');
var fs = require('fs');
const nodemailer = require('nodemailer');
var env = process.env.NODE_ENV;
// Node express server setup.
var app = express();
app.set('port', 4200);
app.use(cors());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended : true
}));
app.use(express.json()); // to support JSON-encoded bodies
var server = https.createServer(proxyOption, app);
server.listen(app.get('port'), function() {
console.log('Express server listening on port ' + app.get('port'));
});
// redirect requests from HTTP to HTTPS
http.createServer(function (req, res) {
console.log('Redirect HTTP request to https://' + req.headers['host'] + req.url);
res.writeHead(301, { "Location": "https://" + req.headers['host'] + req.url });
res.end();
}).listen(80);
Is this a problem of CORS doesn't working properly?
I have also seen that is suggested to put the following value in the polyfills.ts file:
-----> (window as any).__Zone_enable_cross_context_check = true;
import 'zone.js/dist/zone'; // Included with Angular CLI.
Microsoft Edge
Here you can see that on Edge the same request loaded is not working and the header is empty, that sounds strange
Edge Console:
On Chrome :
Firefox:
Why Access-Control-Allow-Headers are only in Chrome and not present in Firefox? (same page)
Why the following code is not visible when I load with Edge/Firefox?
app.all("/db/config", function(req, res, next) {
console.log(req.method + ' ' + req.url); <--- Visible only with Chrome
processDbRequest(req, res, Config);
});
I am starting the application with the following command:
ng serve --host 0.0.0.0 --port 443 --public-host IP --ssl --ssl-key /run/secrets/secret.key --ssl-cert /run/secrets/secret.cert --proxy-config server.js --prod
What do you think?
Tks
Anyhow on Chrome there is the section (CORS) not visible in the headers of Edge/Firefox.
UPDATE
The Error visible in EDGE are:
Uncaught (in promise): Response with status: 0 for URL: null"
[object Error]: {description: "Uncaught (in promise): Response with status: 0 for URL: null", message: "Uncaught (in promise): Response with status: 0 for URL: null", promise: Object, rejection: Object, stack: "Error: Uncaught (in promise): Response with status: 0 for URL: null at M (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:14070) at M (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:13634) at Anonymous function (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:14864) at t.prototype.invokeTask (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:8720) at onInvokeTask (https://<IP>/main.962c274fd5e7aea50f8c.js:1:422471) at t.prototype.invokeTask (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:8720) at e.prototype.runTask (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:4000) at g (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:11104) at e.invokeTask (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:9950) at m (https://<IP>/polyfills.126a602ce79d269ee3a3.js:1:23265)"...}
Here package.json configuration:
{
"name": "elg-dash",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "export NODE_ENV=dev && ng serve --port 3000 --proxy-config server.js ",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/http": "^7.2.15",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#eds/vanilla": "^3.4.0",
"body-parser": "^1.19.0",
"core-js": "^2.5.4",
"cors": "^2.8.5",
"d3": "^5.12.0",
"dragula": "^3.7.2",
"express": "^4.17.1",
"mapbox-gl": "^1.4.1",
"microsoft-adal-angular6": "^1.3.0",
"mongoose": "^5.7.5",
"ng2-completer": "^3.0.2",
"ng2-datepicker": "^3.1.1",
"ng2-smart-table": "^1.5.0",
"ngx-permissions": "^7.0.3",
"nodemailer": "^6.3.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.9",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "^2.0.8",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"rxjs-compat": "~6.5.3",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
SMALL UPDATE
It seems that the same angular application works in Firefox with the following version : 72.0.1 (64-bit), the same app doesn't work on the Linux Version 72.0.1 (64-bit).

Answer 1

#Prisco It is hard to say it is CORS because in that case you cannot get 200 OK status.
Your image do not give any hint much. I GUESS some scenarios happened to you base on my experience that I faced same issue before with Angular on server using JBOSS (not docker).
Check the response and see there is the message like failed to load... or not?
If yes, then something block your response. It could be your web server and could be your computer software like antivirus.
Check your page look like? Empty page? If Yes, It is because your front-end configuration like polyfill and browserlist.
Compare line by line to see different between Chrome and Edge to see any different and google it.
Could you try to deploy your project without docker to see it work or not. If it is working, then your docker configuration have issue.