角度和節點應用程序中的 CORS 不起作用

Question

我在我的（Dockerized）Angular 應用程序中遇到了一些問題。
在 Edge/Firefox 上加載我的 angular 應用程序期間，填充我的主頁所需的所有請求（RestApi）都沒有到達我的應用程序。 如果我用 Chrome 加載同一個頁面，所有請求都會到達，然后頁面被填充。

我的 Angular 應用程序的server.js是：

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

這是CORS無法正常工作的問題嗎？
我還看到建議將以下值放在polyfills.ts文件中：

    -----> (window as any).__Zone_enable_cross_context_check = true;
    import 'zone.js/dist/zone';  // Included with Angular CLI.

Microsoft Edge在這里您可以看到在Edge上加載的相同請求不起作用並且標頭為空，這聽起來很奇怪 邊緣控制台：

在 Chrome 上：

火狐：

為什么 Access-Control-Allow-Headers 僅在 Chrome 中存在，而在 Firefox 中不存在？ （同一頁）

為什么使用 Edge/Firefox 加載時看不到以下代碼？

app.all("/db/config", function(req, res, next) {
    console.log(req.method + ' ' + req.url);             <--- Visible only with Chrome
    processDbRequest(req, res, Config);
});

我正在使用以下命令啟動應用程序：

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

你怎么認為？
塔克斯

無論如何，在 Chrome 上，Edge/Firefox 的標題中看不到該部分 (CORS)。

更新EDGE 中可見的錯誤是：

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

這里 package.json 配置：

{
  "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"
  }
}

小更新

似乎相同的 angular 應用程序在以下版本的 Firefox 中工作： 72.0.1 (64-bit) ，相同的應用程序在Linux Version 72.0.1 (64-bit) 上不起作用。

Answer 1

@Prisco 很難說它是 CORS，因為在這種情況下，您無法獲得 200 OK 狀態。 你的形象沒有給出任何暗示。 我猜根據我的經驗，我在使用 JBOSS（不是 docker）在服務器上使用 Angular 之前遇到過同樣的問題，我猜你會遇到一些情況。

1. 檢查響應，看看有failed to load...之類的消息failed to load...或沒有？ 如果是，那么某些東西會阻止您的回復。 它可能是您的網絡服務器，也可能是您的計算機軟件，例如防病毒軟件。

2. 檢查你的頁面是什么樣的？ 空頁？ 如果是，那是因為你的前端配置如 polyfill 和 browserlist。

3. 逐行比較以查看 Chrome 和 Edge 之間的差異以查看任何不同並谷歌它。

4. 您能否嘗試在沒有 docker 的情況下部署您的項目以查看它是否有效。 如果它工作正常，那么你的 docker 配置有問題。