角度和节点应用程序中的 CORS 不起作用

Posted 2023-03-04

【中文标题】角度和节点应用程序中的 CORS 不起作用

【英文标题】：CORS in angular and node application not working

【发布时间】：2020-05-01 16:09:23

【问题描述】：

我的（Dockerized）Angular 应用程序遇到了一些问题。 在我的 Angular 应用程序的 Edge/Firefox 上加载期间，填充我的主页所需的所有请求（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.

微软边缘 在这里您可以看到在 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 位），相同的应用程序在 Linux 版本 72.0 上无法运行。 1 个（64 位）.

【问题讨论】：

当您查看 Edge 中开发人员工具的“网络”选项卡时，很容易发现 CORS 错误。你看到那里有任何错误吗？还是在控制台选项卡中？

检查网络标签或控制台标签

嗨@HereticMonkey 我已经用一些图片更新了帖子

响应为 200 OK，因此不太可能是 CORS 错误（通常状态为 0）。

@HereticMonkey 奇怪的想法是我无法像您在 Chrome（在 Edge 上）上看到的那样看到请求标头

【参考方案1】：

@Prisco 很难说它是 CORS，因为在这种情况下你无法获得 200 OK 状态。 您的图像没有给出任何提示。根据我之前使用 JBOSS（而不是 docker）在服务器上使用 Angular 时遇到相同问题的经验，我猜你发生了一些情况。

检查响应，看看有没有像failed to load... 这样的消息？ 如果是，那么某些东西会阻止您的响应。它可能是您的网络服务器，也可能是您的计算机软件，例如防病毒软件。

检查你的页面是什么样子的？空白页？如果是，那是因为你的前端配置像 polyfill 和 browserlist。

逐行比较，看看 Chrome 和 Edge 之间的差异，看看有什么不同，然后用谷歌搜索。

您能否尝试在没有 docker 的情况下部署您的项目以查看它是否工作。如果它工作正常，那么您的 docker 配置有问题。

【讨论】：

与火狐浏览器上的 GET 请求相关我可以在安全选项卡中看到 SSL_ERROR_BAD_CERT_DOMAIN，在 Edge 上不可见

@Prisco 是的 SSL 也可以阻止您的回复。只允许您的页面来自地址上的图标或使用http。

嗨@Hoang，我需要使用https，似乎有些东西阻止了请求，因为在我的角度应用程序中，一旦加载页面，我就没有收到任何RestAPI，而是加载相同的页面使用 Chrome，我可以看到许多获取请求到达。似乎服务器和代理之间的通信无法正常工作:-(

您是否为您的应用程序添加了 SSL 证书？如果没有安装 SSL 证书，您可以从这里wikihow.com/Install-an-SSL-Certificate 获得一些提示

是的，我正在使用证书并启动我的应用程序：ng serve --host 0.0.0.0 --port 443 --public-host --ssl --ssl-key /run/ secrets/secret.key --ssl-cert /run/secrets/secret.cert --proxy-config server.js --pro d