node.js - 使用 Express 服务 Angular 时出现 CORS 错误

Question

我有 2 个 server.js 文件。其中之一位于后端文件夹内，当我在 localhost:3000 上运行 nodemon server.js 时。我将在 Angular 文件夹内使用 ngserve 启动 Angular，并毫无问题地登录到我的应用程序。一切正常。没有 CORS 问题。

但是

如果我尝试在 Express 为我的 Angular 构建文件夹提供服务的根目录中运行我的 server.js 文件。它在 localhost:8080 上启动，但是当我尝试登录我的应用程序时，我得到

在我的 app.js 文件中，我有以下内容，应该是相关的。还有一点值得注意 我制作了一个 docker 版本，该版本也给了我 CORS 错误。所以它似乎只在使用 ngserve 和 nodemon server.js 在本地运行时才有效

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  res.header(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, PUT, DELETE, OPTIONS"
  );

  next();
});

后端文件夹中的 server.js 文件(localhost:3000 无 CORS 错误)

const app = require("./app");
const debug = require("debug")("node-angular");
const http = require("http");
const mongoose = require("mongoose");
var redis = require("redis");

var env = require("dotenv").config();


const normalizePort = val => {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    e;
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
};

const onError = error => {
  if (error.syscall !== "listen") {
    throw error;
  }
  const bind = typeof port === "string" ? "pipe " + port : "port " + port;
  switch (error.code) {
    case "EACCES":
      console.error(bind + " requires elevated privileges");
      process.exit(1);
      break;
    case "EADDRINUSE":
      console.error(bind + " is already in use");
      process.exit(1);
      break;
    default:
      throw error;
  }
};
console.log("process.env.COSMODDB_USER");
console.log(env.COSMODDB_USER);
mongoose
  .connect(
    "mongodb://" +
      process.env.COSMOSDB_HOST +
      ":" +
      process.env.COSMOSDB_PORT +
      "/" +
      process.env.COSMOSDB_DBNAME +
      "?ssl=true&replicaSet=globaldb",
    {
      auth: {
        user: process.env.COSMODDB_USER,
        password: process.env.COSMOSDB_PASSWORD
      }
    }
  )
  .then(() => console.log("Connection to CosmosDB successful"))
  .catch(err => console.error(err));

const onListening = () => {
  const addr = server.address();
  const bind = typeof port === "string" ? "pipe " + port : "port " + port;
  debug("Listening on " + bind);
};

const port = normalizePort(process.env.PORT || "3000");
app.set("port", process.env.PORT || port);

var server = app.listen(app.get("port"), function() {
  debug("Express server listening on port " + server.address().port);
});

根目录中的server.js(localhost:8080 CORS错误)

var express    = require('express');
var app        = express();
var bodyParser = require('body-parser');
var morgan     = require('morgan');
const userRoutes = require("./app/routes/user");
const appRoutes = require("./app/app");

const cors = require("cors");
app.use(morgan('dev'));


app.use(cors({ origin: 'http://localhost:8080' , credentials :  true}));var mongoose   = require('mongoose');
var path       = require('path');
var config = 'mongodb://azure45:azure45@ds133321.mlab.com:33321/azure_chat'
//const app = require("./app");
const debug = require("debug")("node-angular");
var env = require("dotenv").config();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    next();
});


mongoose
  .connect(
    "mongodb://" +
      process.env.COSMOSDB_HOST +
      ":" +
      process.env.COSMOSDB_PORT +
      "/" +
      process.env.COSMOSDB_DBNAME +
      "?ssl=true&replicaSet=globaldb",
    {
      auth: {
        user: process.env.COSMODDB_USER,
        password: process.env.COSMOSDB_PASSWORD
      }
    }
  )
  .then(() => console.log("Connection to CosmosDB successful"))
  .catch(err => console.error(err));

app.use(express.static(__dirname + '/public/dist/glass/'));

//var apiRoutes = require('./app/app')(app, express);
app.use("/api/", appRoutes);
app.use("/api/user", userRoutes);

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname + '/public/dist/glass/index.html'));
});

app.listen(8080);
console.log('Magic happens on port ' + 8080);




const normalizePort = val => {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    e;
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
};

const onError = error => {
  if (error.syscall !== "listen") {
    throw error;
  }
  const bind = typeof port === "string" ? "pipe " + port : "port " + port;
  switch (error.code) {
    case "EACCES":
      console.error(bind + " requires elevated privileges");
      process.exit(1);
      break;
    case "EADDRINUSE":
      console.error(bind + " is already in use");
      process.exit(1);
      break;
    default:
      throw error;
  }
};
console.log("process.env.COSMODDB_USER");
console.log(env.COSMODDB_USER);


const onListening = () => {
  const addr = server.address();
  const bind = typeof port === "string" ? "pipe " + port : "port " + port;
  debug("Listening on " + bind);
};

这是项目文件结构作为引用。 app.js 是我所有 API 所在的位置。

Answer 1

尝试使用 Node.js CORS library对于 CORS。

如下所示。

const express = require("express");

const cors = require("cors");

const app = express();

app.use(cors());