Angular 5+向Node.js /login接口POST请求遇404预校验错误求助

嘿，我来帮你搞定这个困扰！你遇到的其实是跨域资源共享（CORS）的预检请求问题，这是浏览器同源策略导致的典型问题，和你代码里的POST逻辑本身关系不大。

问题根源拆解 #

浏览器在发送带自定义请求头（比如你设置的Content-Type: application/json）的跨域POST请求前，会自动先发送一个OPTIONS预检请求到目标接口，用来确认服务器是否允许这个跨域请求。但你的Node.js服务器目前只处理了/login的GET和POST请求，完全没处理OPTIONS请求，所以这个预检请求直接返回了404，导致后续的真实POST请求根本没机会发送。

而Postman能正常运行，是因为它作为API测试工具，不会触发浏览器的同源策略校验，直接就发送了POST请求，所以服务器能正常响应。

两种解决方案（推荐第一种） #

方案1：使用cors中间件（最简单高效）

用成熟的CORS中间件自动处理所有预检请求和跨域头设置：

1. 先安装依赖：

   npm install cors --save
   

2. 在你的Node.js代码中引入并使用中间件：

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   // 先挂载cors中间件，它会自动处理OPTIONS预检请求
   app.use(cors());
   
   // 再定义你的/login路由
   app.route('/login')
     .get(sessionChecker, (req, res) => {
       console.log ('login get');
       res.json({login : false});
       res.sendFile(__dirname + '/public/login.html');
     })
     .post((request, response) => {
       console.log("sesssion is %o", request.session);
       // 你的POST业务逻辑...
     });
   

方案2：手动处理OPTIONS请求（适合不想加依赖的场景）

如果不想用第三方中间件，可以给/login路由手动添加OPTIONS方法的处理：

app.route('/login')
  // 新增OPTIONS处理，返回允许跨域的响应头
  .options((req, res) => {
    // 允许你的Angular域名跨域，比如http://localhost:4200，*代表允许所有域名
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
    // 允许的请求方法
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    // 允许的请求头
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    // 返回200表示允许预检
    res.sendStatus(200);
  })
  .get(sessionChecker, (req, res) => {
    console.log ('login get');
    res.json({login : false});
    res.sendFile(__dirname + '/public/login.html');
  })
  .post((request, response) => {
    console.log("sesssion is %o", request.session);
    // 你的POST业务逻辑...
  });

额外检查点 #

• 确认Angular代码里的this.url确实是http://localhost:3000/login，没有拼写错误
• 确认Node服务器运行在3000端口，Angular运行在另一个端口（比如默认的4200），这才会触发跨域校验

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