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).
