Angular HttpClient: метод Post не устанавливает параметры правильно - PullRequest
Новая
       24

Angular HttpClient: метод Post не устанавливает параметры правильно

2 голосов
/ 15 марта 2019

В моем методе есть запрос на публикацию transmitProject(project: ProjectModel): Observable<boolean> через HttpClient, где я хотел бы разместить данные на своем бэкенде:

- в моем transmitProject -методе 

const params = {
   projectId: project.projectId,
   description: documentation.description,
   // some other attributes ...
};

return this.http.post(this.conf.url, params).pipe(
   map(response => {
      console.log(response);
      return true;
   })
);

... пока здесь все работает нормально.Но запрос устанавливает данные поста в формате json.Для тестирования backend-сервера возвращаем выгруженную переменную $ _POST -> null.

Запрос полезной нагрузки: {projectId: "...", описание: "...", долгота: 10, широта: 10,…}

на самом деле должно быть: projectId = ... description = ... longitude = 10latitude = 10 ...

-> В Postman все работает отлично.

Ответы [ 2 ]

3 голосов
/ 15 марта 2019

Проблема здесь в том, что Angular по умолчанию отправляет почтовый запрос типа JSON.

Либо вы меняете свой бэкэнд PHP, и вместо этого, используя $_POST, вы можете прочитать JSON: 

<?
..
$JSON = file_get_contents("php://input");
if (!empty($JSON ))
{
  $params = json_decode($JSON, true); 
}
?>

Или если вы действительно хотите ретранслировать при отправке как x-www-form-urlencoded Вы можете использовать URLSearchParams, который автоматически устанавливает тип содержимого на application/x-www-form-urlencoded: 

let body = new URLSearchParams();
body.set('username', username);
body.set('password', password);

this.http.post(this.loginUrl, body).map(...);

Конечно, вы можете сделать это и вручную, если вы правильно закодируете свое тело, как это 

let body = `username=${username}&password=${password}`;

но затем вам нужно вручную установить заголовки на application/x-www-form-urlencoded.

Как это 

this.http.post(this.loginUrl, body, { headers: headers }).map(...);
1 голос
/ 15 марта 2019

Это не очевидно, но вы не используете httpClient в правильном направлении.

Вы можете найти эту ситуацию, объясненную в этом SO сообщении .

Если вы не хотите использовать JSON, но хотите придерживаться кодировки x-www-form, ваш код должен выглядеть следующим образом: 

const body = new HttpParams()
  .set('your property name', ** property value **)
  .set(...);

return this.http.post(this.conf.url,
  body.toString(),
  {
    headers: new HttpHeaders()
      .set('Content-Type', 'application/x-www-form-urlencoded')
  }
).pipe(... same code as you already have ...);
...