Angular向NodeJS应用发送POST请求时控制台报错如何解决

• Angular端HttpClient.post参数传参位置错误：Angular的POST方法签名为post(url, 请求体, 请求配置)，原代码把headers、responseType两个配置项错误写入请求体对象中，导致自定义请求头、文本响应类型配置完全不生效，还额外向后端传递了无效字段。
• Node端未配置跨域（CORS）响应头：前后端服务端口不一致（Angular默认运行在4200端口，Node服务运行在3000端口），受浏览器同源策略限制，请求被拦截，控制台抛出跨域错误。
• Node端缺失JSON请求体解析中间件：未配置express.json()的情况下，后端无法解析JSON格式的请求内容，req.body会返回undefined，导致接口逻辑无法正常取参。

1. 修正Angular端请求代码 #

将请求配置项从请求体中移出，放到POST方法的第三个参数位置，修正后代码如下：

newWord = '';
keyword = '';

onClick() {
  const headers = new HttpHeaders()
    .set('Authorization', 'my-auth-token')
    .set('Content-Type', 'application/json');

  this.http
    .post(
      'http://localhost:3000/search',
      // 第二个参数仅传递接口需要的业务字段
      { keyword: this.keyword },
      // 第三个参数统一放请求配置
      {
        responseType: 'text',
        headers: headers,
      }
    )
    .subscribe((data) => {
      console.log(data);
      this.newWord = data as string;
    })
}

2. 修正Node端服务配置 #

首先安装跨域依赖，同时补充缺失的请求体解析中间件：

1. 执行命令安装cors依赖：

   npm install cors
   

2. 在Express服务中引入并注册中间件，注意中间件要写在路由定义之前，修正后代码如下：

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   // 注册跨域中间件，开发环境可直接放行所有来源，生产环境建议配置具体域名白名单
   app.use(cors());
   // 注册JSON请求体解析中间件，否则无法读取req.body中的参数
   app.use(express.json());
   
   app.post("/search", (req, res) => {
     search(req.body.keyword).then((ids) => {
       console.log(ids[0].text);
       res.send(ids[0].text);
     });
   });
   
   app.listen(3000, () => {
     console.log('服务已启动在3000端口');
   });
   

如果不想额外安装cors依赖，也可以手动配置跨域响应头，替换上述cors中间件注册逻辑即可：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  // 直接响应浏览器发起的OPTIONS预检请求
  if (req.method === 'OPTIONS') return res.sendStatus(200);
  next();
});

修改完成后重启Node服务、刷新Angular页面即可正常发起请求。

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