Angular 7 не отправляет данные запроса HTTP Post

Question

Я пытаюсь отправить запрос HTTP Post в API REST, который я разработал с использованием ExpressJS.Я использую HttpClient от Angular, используя следующий файл сервиса для отправки запросов:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaWQiOiJ0ZXN0MiIsImxldmVsIjoxLCJpYXQiOjE1NTYyMDU0OTMsImV4cCI6MTU1NjI5MTg5M30.luqbDb-sSLxsX0LKFTaF6NTYDO4tS6kCI8V_d9pizmA'
    })
};

@Injectable({
  providedIn: 'root'
})
export class ApiserviceService {

  constructor(private http: HttpClient) { }

  getData(url: string) {
    return this.http.get(url)
  }
  postData(url: string, data: Object) {
    console.log(data);
    return this.http.post(url, data, httpOptions)
  }
}

Вызов службы с использованием следующего кода:

/* other Component class code */
constructor(private data: ApiserviceService) {}

submit()
{
let url: string =
    "http://xxx.xxx/api/hotels/"
    + this.route.snapshot.params.hotelId
    + "/reviews";
    this.data.postData(url, this.revForm.value).subscribe(data => {
      console.log(data);
      this.router.navigate(['/']);
    });
}

Мне пришлось добавить заголовок авторизации, так какAPI отклонит все запросы, которые не содержат токен.

В журнале консоли чуть выше оператора http.post в служебном файле я получаю данные точно так, как нужно, объект JSON со всеминеобходимые параметры печатаются в консоли Google Chrome.Однако по какой-то причине угловое приложение отправляет пустой запрос.

Я получил ошибку в пропущенных значениях в ответе, поэтому, чтобы выяснить причину, я добавил следующую строку в контроллер API вдольобработка ошибок:

console.log (req.body);

Вот функция из API:

var _addReview = function(req, res, data) {
        data.reviews.push({
                name : req.body.name,
                rating : parseInt(req.body.rating, 10),
                review : req.body.review,
                id : req.userid
        });
        data.save(function(err, hotelUpdated){
                if(err) {
                        console.log(req.body);
                        res.status(500).json(err);
                }
                else {
                        res.status(201).json(hotelUpdated.reviews[hotelUpdated.reviews.length - 1]);
                }
        });
};

Напечатана консоль NodeJSпустой объект {}.Я попытался изменить Content-Type на application / json, но все равно не повезло.

Я также заметил в консоли NodeJS, что мое приложение Angular отправляет запрос OPTIONS перед запросом POST.Я проверил онлайн и обнаружил, что запрос POST будет отправлен только после того, как запрос OPTIONS вернет код 200.Однако мой запрос POST отправляется, так как я получаю ответ.Поэтому я считаю, что запрос OPTIONS становится успешным.

Мой API отлично работает в Postman, даже когда я отправляю те же самые заголовки, что и в приложении Angular.

Answer 1

Решил проблему, отправив запрос с Content-Type: application / json вместо application / x-www-form-urlencoded. Очевидно, Angular не конвертировал application / x-www-form-urlencoded в json-анализируемые данные, как это делал Postman.

Answer 2

Используете ли вы промежуточное программное обеспечение body-parser при обработке маршрута?

см. Пример ниже:

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  res.end(JSON.stringify(req.body, null, 2))
})