HTTPClient POST 请求不适用于 Angular 5 / Angular Universal

Question

我在尝试使用 RESTful API 实现简单的 MEAN Stack CRUD 应用程序时遇到了问题，如本文所述： MEAN Stack (Angular 5) CRUD Web Application Example 。

我首先仅使用 Angular 5（此处为 GitHub 存储库）创建了该应用程序，效果很好！ 然后，我尝试使用 Angular 5 / Angular Universal 重新创建应用程序，这就是我开始遇到问题的时候。 我可以毫无问题地执行 GET/DELETE 请求。 但是，我无法执行 POST/PUT 请求（我使用 ngModel 使用了模板驱动的表单） 。

本质上，提交表单后，我的console.log节点显示GET request (status 304) ，URL 是/book-create?title=&author=这让我相信我的输入字段甚至没有被记录。 值得一提的是，我所有记录的请求都是GET requests (status 304) ，即使是正确加载的网页。 我用 Postman 测试了我的后端 API，它按预期工作。

我知道 Angular Universal 会进行服务器端渲染，所以

1. 我的 POST 请求不工作的原因是视图没有在客户端呈现吗？
2. 304状态码和这个问题有关系吗？

相关代码片段如下所示。 感谢您的帮助！

book-create.component.ts

export class BookCreateComponent implements OnInit {

book: any = {};

constructor(private http: HttpClient, private router: Router) { }

saveBook() {
this.http.post('api/book', this.book)
  .subscribe(res => {
    this.router.navigate(['/books']);
  }, err => {
    console.log(err);
  });
}}

book-create.component.html

<form #bookForm="ngForm" (ngSubmit)="saveBook()">
  <input required name="title" [(ngModel)]="book.title" type="text">
  <input required name="author" [(ngModel)]="book.author" type="text">
  <input type="submit" value="Create">
</form>

服务器.js

require('zone.js/dist/zone-node'); // COMMENT: Server specific version of Zone.js

const express = require('express');
const path = require('path');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const ngUniversal = require('@nguniversal/express-engine'); // COMMENT: SSR Engine
const appServer = require('./dist-server/main.bundle'); // COMMENT: Server Bundle

const app = express();
const port = process.env.PORT || 3000;
const api = require('./routes/api');

const config = require('./config/database');
mongoose.Promise = require('bluebird');
mongoose.connect(config.database, { useMongoClient: true, promiseLibrary: 
require('bluebird') })
  .then(() => console.log(`Connected to database ${config.database}`))
  .catch((err) => console.log(`Database error: ${err}`));

app.engine('html', ngUniversal.ngExpressEngine({ // COMMENT: Engine Config
  bootstrap: appServer.AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', 'dist');

function serverRouter(req, res, next) => {
  if (req.url.startsWith('/api')) return next();
  res.render('index', { req, res });
}

app.use(morgan('dev'));
app.use(bodyParser.json());

app.get('/', serverRouter); // COMMENT: Server-side rendering of root route
app.use('/api', api);
app.use(express.static(`${__dirname}/dist`));
app.get('*', serverRouter);

// API Error Handler here (not shown)

app.listen(port, () => console.log(`Server started on port ${port}`));

Answer 1

我假设您使用代理将 api 请求发送到另一台服务器？ 如果是这样，是您错过了“api/book”斜线的错误吗？ 我认为应该是

/api/book 

Answer 2

我无法弄清楚发生了什么，所以我决定删除整个应用程序并从头开始 1. 克隆原始工作项目，然后 2. 使用我的 Angular 5 w/ Angular Universal 入门套件通过重新创建来集成 Angular Universal手动对 Angular 源文件所做的更改本可以使用ng g universal universal ：

1. MEAN CRUD 示例 - https://github.com/Stanza987/mean-crud-example
2. 带有 Angular Universal 的 MEAN 入门套件 - https://github.com/Stanza987/mean-starter-kit

这样做之后，我运行了该应用程序，它没有问题！ ..？ 我重新检查了 server.js，它与我上面发布的相同，所以我不确定出了什么问题。 这次我的 HttpClient POST/PUT 请求有效。 我希望我能说我找到了解决方案，但我想我永远不会知道。 我想我现在有信心this.http.post('api/book', this.book)将与 Angular Universal 一起使用。

@David：谢谢，感谢您帮助我思考这个问题。

Answer 3

对 POST 和 PUT 使用 httpHeaders 而不是 Headers