Angular：CORS预检请求响应失败，MEAN栈用户注册应用问题求助

大家好：
我在开发用户注册应用时遇到了问题，希望各位能帮忙排查原因：
我的技术栈为MongoDB、Express、Angular和Node.js，以下是项目中app.js文件的代码，同时附上火狐和Chrome浏览器中都出现的报错截图，提前感谢各位的帮助。

var express = require('express');
var bodyParser = require('body-parser');


var app =express();
var user_routes = require('./routes/user');
var follow_routes = require('./routes/follow');
var publication_routes = require('./routes/publication');
var message_routes = require('./routes/message');

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

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

}); 

app.use('/api', user_routes);
app.use('/api', follow_routes);
app.use('/api', publication_routes);
app.use('/api', message_routes);

module.exports = app;

问题修复方案 #

你遇到的是CORS跨域配置错误，按以下步骤修改即可解决：

1. 处理OPTIONS预检请求
   浏览器发送非简单请求前会先发起OPTIONS预检请求，你当前的配置没有对这类请求做单独处理，导致预检流程失败。修改CORS中间件代码：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
  // 新增逻辑：OPTIONS请求直接返回成功状态
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

2. 依赖优化（可选）
   Express 4.16.0版本之后已经内置了body解析能力，不需要额外引入body-parser依赖，可以将代码中对应的两行替换为：

app.use(express.urlencoded({extended: false}));
app.use(express.json());

修改后可以直接从package.json中移除body-parser依赖项。
3. 验证路由逻辑
如果修改后仍有报错，检查./routes/user文件中的注册接口逻辑，确认是否正确处理POST请求、返回了合法的响应状态码。

内容的提问来源于stack exchange，提问作者SecaidaDevStudent