HTTPClient POST 请求在 Angular 5 / Angular Universal 上不工作

Question

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

我首先只使用 Angular 5 (GitHub repo here) 创建了应用程序，效果很好！然后，我尝试使用 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 做服务端渲染所以

我的 POST 请求不工作的原因是因为 视图没有在客户端中呈现吗？
304 状态码是否与此问题有关？

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

本书-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);
  });
}}

本书-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>

server.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 starter kit to integrate Angular Universal by recreating the changes made to the Angular source files manually that would have been done using ng g universal universal:

MEAN CRUD 示例 - https://github.com/Stanza987/mean-crud-example
MEAN 入门套件，带 Angular 通用 - 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

HTTPClient POST 请求在 Angular 5 / Angular Universal 上不工作

HTTPClient POST request not working on Angular 5 / Angular Universal

crud

mean-stack

server-side-rendering

angular-universal

angular