Сообщение клиента Angular 6 HTTP - неверный запрос

У меня следующая проблема. У меня есть сервер, на котором установлен API, я отправляю запрос конечной точке регистрации, но в ответ я получаю ошибку 400 Bad Request, в которой говорится, что имя, фамилия, адрес электронной почты и т. Д. Должны быть заполнены. Проблема в том, что они заполнены. Я больше скучаю по идеям. Мой код:

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'Brak tytułu';

    constructor(private http: HttpClient) {
    }

    registerUser() {
        const config = {headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')};
        const user: User = {
            name: 'Pawel',
            surname: 'Tester',
            email: 'tester@wp.pl',
            password: 'loremipsum12',
            password_confirm: 'loremipsum12',
            event_id: 1,
        };

        this.http.post('https://myapiserver', user, config).subscribe((res) => {
                console.log(res);
                console.log(user);
            },
            error => {
                console.log(error);
                console.log(user);
            });
    }
}

interface User {
    name: string;
    surname: string;
    email: string;
    password: string;
    password_confirm: string;
    event_id: number;
}

Этот код работает нормально, но он angularJS

    // User create
$scope.createUser = function()
{
    var create_req = $rootScope.reqDefaults;
        create_req.method = 'POST';
        create_req.url = $rootScope.api+'/admin/user';
        create_req.data = $httpParamSerializerJQLike($scope.current);
        create_req.transformRequest = angular.identity;

    // Users list
    $http(create_req)
        .then(function(response){
            $location.path('/users');
            $.notify({
                title: '<strong>Użytkownik utworzony.</strong>',
                message: $scope.current.name+' '+$scope.current.surname+' (ID: '+response.data.id+')'
            },{
                type: 'success'
            });
            return true;
        }, function(response){
            $rootScope.rspError(response.data);
            return false;
        });
};

Если я отправляю запрос в конечную точку реестра от Почтальона, все работает нормально, мой пользователь зарегистрирован правильно:(Я установил тип контента для application/x-www-form-urlencoded.

Источник

4 ответа

Решение

HttpClient от Angular на самом деле очень умен, чтобы выяснить, какой тип контента должен иметь ваш запрос. Просматривая исходный код в этой строке

if (this.body instanceof HttpParams) {
  return 'application/x-www-form-urlencoded;charset=UTF-8';
}

вы увидите, что он установит требуемый заголовок для вас, если вы установите тело как HttpParams, Итак, решение вашей проблемы должно быть:

const body = new HttpParams()
  .set('name', 'foo')
  .set('surname', 'bar')

this.http.post('https://myapiserver', body).subscribe(...);
Источник

Не устанавливайте заголовки содержимого, которые по умолчанию будут устанавливать их в JSON, или устанавливайте их для JSON следующим образом: application/json

Однако если ваш API ожидает полезную нагрузку в кодированном виде, вы должны оставить заголовок так же, как он у вас, но измените запрос на отправку данных в кодированном виде следующим образом:

  const body = new HttpParams()
    .set('name', 'Pawel')
    .set('surname', 'Tester');

  this.http.post('https://myapiserver',
    body.toString(),
    config
  );
Источник

Это работает для меня

const config = new HttpHeaders().set('Content-Type', 'application/json')
                                .set('Accept', 'application/json')

this.http.post('https://myapiserver', JSON.stringify(user), 
               { headers: config }).subscrib.....

Надеюсь это поможет

РЕДАКТИРОВАТЬ: используя новый HttpClientModule

const formData = new FormData();

// append your data
formData.append('myKey1', 'some value 1');
formData.append('myKey1', 'some value 2');
formData.append('myKey3', true);

this.httpClient.post('https://myapiserver', formData);

НЕ устанавливайте заголовок Content-Type, угловой исправит это для вас! Источник: Как заставить Angular2 POST с помощью x-www-form-urlencoded

Источник

Здесь я вижу две основные проблемы: у HttpHeaders отсутствует авторизация:

      const config = {headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');
HttpHeaders().set('Authorization': 'Basic ' + credentials);
HttpHeaders().set('Accept':'*/*')
};

где учетные данные могут быть: const credentials = btoa ("angularUser" + ":" + "пароль"); должен быть определен в CORS серверной части для проверки.

другое дело, тело, должно быть определено следующим образом: let user = new URLSearchParams ();

user.set ('параметр1', 'значение1'); user.set ('параметр2', 'значение2'); ... И если не работает, попробуйте изменить Content-type с application / x-www-form-urlencoded на application / json. По крайней мере, у меня это сработало. Ваше здоровье.

Источник
Другие вопросы по тегам