成功 CORS 握手后，Angular 5 HttpClient POST 请求为空答案

【问题标题】：Angular 5 HttpClient POST request empty after successful CORS handshake成功 CORS 握手后，Angular 5 HttpClient POST 请求为空
【发布时间】：2018-01-18 02:41:42
【问题描述】：

我是 JavaScript 世界的新手，一直在努力将 AJAX 请求从 Angular 发送到后端 Node.js Express 应用程序。我的 TypeScript 文件中的 POST 请求如下所示，带有 JSON 正文：

    this.httpClient.post(url, createdOrUpdatedBlog, {headers: {'Content-Type': 'application/json; charset=utf-8'}})
    .subscribe(res => {
      this.router.navigate(['/admin/blogs/list']);
    },
    error => console.log(error));

在我的 Node 应用程序中，我有一些简单的中间件来处理 CORS。

    app.use((req,res,next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods',   'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.header('Access-Control-Allow-Credentials', true);
    if(req.method === 'OPTIONS') {
       res.send(200);
    } else {
      next();
    }
  });

我可以看到 OPTIONS 请求并返回 OK 响应。我也可以看到 POST，但它总是空的（没有标题或内容），我不知道为什么。

我可能遗漏了一些非常明显的东西。任何帮助将不胜感激。

【问题讨论】：

服务似乎挂起并且没有返回响应。这可能是您对 API 的快速配置的问题。
我可以毫无问题地使用 Postman 发出请求，因此看起来 API 配置正确。有效载荷肯定不是空的。
你能分享你的快速 API 代码吗？

标签： node.js ajax angular http cors

【解决方案1】：

我看到您正在使用 HttpClient，您可以尝试以这种方式设置您的标头吗？

{ headers: new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8') }

至于您的有效载荷，请检查您是否发送的是空的。

（由于我的工作代理，我看不到图像，是在您的 chrome 控制台还是在您的节点日志中？）

【讨论】：

以这种方式设置标题不应该有所作为。被否决，因为这并没有试图解决 OPs 问题
因为它是一个类，有几个方法和属性，并且是 Angular 内部的，我很确定使用它可以比使用普通对象产生影响。否决您想要的所有内容，但这是一个值得探索的解决方案。
github.com/angular/angular/blob/master/packages/common/http/src/… 在内部，普通对象将被转换为 httpheaders 实例。同样，您对 OP 代码的更改没有任何区别。
我明白了，在这种情况下我的错，谢谢你的链接！
我对 http 标头使用拦截器。我是从 the official documentation 那里得到的，因此我的回答是

【解决方案2】：

结果证明这与 CORS 无关，是因为前端和后端之间的大小写差异......

还是谢谢！

【讨论】：