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

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

我第一次使用Angular 5 only（）创建应用程序，效果非常好！然后，我尝试使用Angular 5/Angular Universal重新创建应用程序，从那时起我开始遇到问题。我可以执行GET/DELETE请求而不会出现问题。但是，我无法执行POST/PUT请求（我使用了使用ngModel的模板驱动表单）

基本上，在提交表单之后，节点中的my

console.log

显示一个

获取请求（状态304）

，URL是

/book create？title=&author=

，这让我相信我的输入字段甚至没有被记录。值得一提的是，我记录的所有请求都是

GET请求（状态304）

，甚至是正确加载的网页。我用Postman测试了我的后端API，它工作正常

我知道Angular Universal做服务器端渲染

我的POST请求不起作用的原因是因为客户端中未呈现视图吗？

304状态代码是否与此问题有关

相关代码片段如下所示。谢谢你的帮助

图书创建.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);
  });
}}

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}`));

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>

---

我假设您正在使用代理将api请求发送到另一台服务器？ 如果是这样的话，是不是您遗漏了“api/book”的斜杠？我想应该是这样

/api/book 

---

我不知道发生了什么，所以我决定删除整个应用程序，从1开始从头开始。克隆原始工作项目，然后执行2。使用我的Angular 5 w/Angular Universal starter工具包，通过手动重新创建对Angular源文件所做的更改来集成Angular Universal，该更改本应使用

ng g Universal

完成：

平均积垢示例-

平均起动机套件，带角度通用-

完成后，我运行了应用程序，它没有任何问题。。？我重新检查了server.js，它与我上面发布的相同，所以我不确定出了什么问题。我的HttpClient POST/PUT请求这次有效。我希望我能说我找到了解决办法，但我想我永远也不会知道。我想我现在确信

this.http.post（'api/book'，this.book）

将与Angular Universal一起工作

---

@大卫：谢谢，我很感谢你帮我想清楚这一点。

使用httpHeaders而不是POST和PUT的头。

当使用angular universal时，必须绝对注意传递给http客户端的URL，谢谢！不幸的是，更改为绝对URL并没有解决我的问题。这很奇怪。我也有同样的问题：当angular尝试使用HttpService时，express没有响应。没有回应，就这样。请添加一些代码示例，以便提问者更容易理解