表单提交在控制台中显示奇怪的错误

Question

我正在开发一个小型 ToDo 应用程序，其中我将 Angular 作为前端，将 Node.js/Express/Mongo 作为中间件/后端。

当我在我的登录表单中提交登录时，它会点击登录 API，但是它会在控制台中返回一个奇怪的输出，说

选项http://localhost:3000/api/v1/users/login/0 {}

（见下面的截图）即使在成功登录后我也无法获取仪表板。

我通过安装 cors NPM 模块启用了 CORS。我在 Postman 中检查了 RESTFul 服务，一切正常。

[更新] 这就是我在 express.js 的 app.js 文件中启用 CORS 的方式。

let cors = require('cors');
app.use(cors());
app.options('*', cors());

Answer 1

要在 express 中处理 CORS，您不需要添加任何依赖项。 请注意，http://localhost:4200 是您的 Angular 应用程序。

这对我有用：

//Add here whatever route you are using for the api.
app.use('/api', (req, res, next) => {
  //Where http://localhost:4200 is the angular app
  res.header('Access-Control-Allow-Origin', 'http://localhost:4200'),
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  next();
})

注意： 这发生在您导入路线的位置之后和使用它们的位置之前。有点像：

const apiRouter = require('./app_api/routes/api_routes');
//The code i posted here
app.use('/api', apiRouter);

Answer 2

这似乎是一个known nodejs issue 仍然打开。

基于开放的github，似乎最好的建议是尝试这样的：

您需要同时允许：

// Http.OPTIONS method for request that is hitting " apiUrl =https://127.0.0.1:3000/login".
// Allow CORS like below:
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'content-type');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');

另一个好主意是使用 angular 代理设置进行本地开发，这样您就根本不需要为 localhost 添加 CORS。

很好的指导in this SO answer here on setting up a proxy for angular 如果这行得通，那么您可以 100% 确定这确实是一个 CORS 问题。

Answer 3

在向服务器发送 CORS 请求之前，客户端将始终将此“OPTIONS”请求作为“预检请求”发送，向服务器请求支持的方法。

此请求被阻止可能表明 CORS 配置错误或来自服务器的所有“OPTIONS”请求的显式阻止。 （服务器上也需要配置CORS）。

更多信息可以找到here