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 in节点显示 GET request (status 304) ，网址为/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请求发送到另一台服务器？如果是这样，那么你错过了＃34; api / book＆＃34; ？我认为应该是

/api/book

Answer 2

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

MEAN CRUD示例 - https://github.com/Stanza987/mean-crud-example
MEAN入门套件w / Angular Universal - https://github.com/Stanza987/mean-starter-kit

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

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

Answer 3

使用httpHeaders而不是用于POST和PUT的标题

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

3 个答案: