Как сделать POST JSON в Angular 2?

Я не понимаю, что я делаю неправильно, мой сервер возвращает "undefined", когда я пытаюсь получить json.

POST(url, data) {
        var headers = new Headers(), authtoken = localStorage.getItem('authtoken');
        headers.append("Content-Type", 'application/json');

        if (authtoken) {
        headers.append("Authorization", 'Token ' + authtoken)
        }
        headers.append("Accept", 'application/json');

        var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: data
        })

        return this.http.request(new Request(requestoptions))
        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        });
    }

И моя функция:

login(username, password) {
        this.POST('login/', {test: 'test'}).subscribe(data => {
            console.log(data)
        })
    }

Когда я пытаюсь это сделать, тело запроса выглядит следующим образом:

Поэтому вместо отправки фактического json он просто отправляет "[object Object]". Вместо "Запросить полезную нагрузку" это должно быть "JSON". Что я делаю неправильно?

Ответ 1

Вам нужно укрепить полезную нагрузку

var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: JSON.stringify(data)
        })

Ответ 2

Я искал визуальный ответ на вопрос о размещении json-данных в angular 2 на некоторое время, но безрезультатно. Теперь, когда у меня есть что-то работающее, пусть делится:

Один лайнер

this.http.post(url, JSON.stringify(data), {headers:{'Content-Type': 'application/json'}})

Работает, но делает компилятор сварливым.

Расширяемый класс

export class MyHttpService {

  constructor(protected http: Http) {}

  headers = new Headers({
    'Content-Type': 'application/json'
  });

  postJson(url: string, data: any): Observable<Response> {
    return this.http.post(
      url,
      JSON.stringify(data),
      {headers: this.headers}
    )
  }

Компилирует отлично, то, что я закончил с помощью

Сущность

В начале я пропустил этот тип "вложенных" способов передачи содержимого типа контента:

{headers:{'Content-Type': 'application/json'}}

Ответ 3

Заголовок должен быть

'Content-Type': 'application/json'

 body: data

должен быть

 body: JSON.stringify(data);

~~См. также https://github.com/angular/http/issues/69~~ Репо было закрыто, и код переместился в репозиторий Angular.