Angular2 - Параметры запроса Http POST

Ответ 1

Я думаю, что тело не подходит для типа контента application/x-www-form-urlencoded. Вы можете попытаться использовать это:

var body = 'username=myusername&password=mypassword';

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

Ответ 2

Обновление для Angualar 4. 3+

Теперь мы можем использовать HttpClient вместо Http

Руководство здесь

Образец кода

const myheader = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
let body = new HttpParams();
body = body.set('username', USERNAME);
body = body.set('password', PASSWORD);
http
  .post('/api', body, {
    headers: myheader),
  })
  .subscribe();

Устаревшие

Или вы можете сделать так:

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
let body = urlSearchParams.toString()

Обновление октябрь 2017

Начиная с angular4+, нам не нужны headers или .toString(). Вместо этого вы можете сделать как в примере ниже

import { URLSearchParams } from '@angular/http';

Метод POST/PUT

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
this.http.post('/api', urlSearchParams).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

ПОЛУЧИТЬ/УДАЛИТЬ метод

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', username);
    urlSearchParams.append('password', password);
    this.http.get('/api', { search: urlSearchParams }).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

Для application/json JSON application/json Content-Type

this.http.post('/api',
      JSON.stringify({
        username: username,
        password: password,
      })).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
      )

Ответ 3

В более поздних версиях Angular2 нет необходимости вручную устанавливать заголовок Content-Type и кодировать тело, если вы передадите объект правильного типа как body.

Вы просто можете это сделать

import { URLSearchParams } from "@angular/http"


testRequest() {
  let data = new URLSearchParams();
  data.append('username', username);
  data.append('password', password);

  this.http
    .post('/api', data)
      .subscribe(data => {
            alert('ok');
      }, error => {
          console.log(error.json());
      });
}

Этот способ angular будет кодировать тело для вас и будет устанавливать правильный заголовок Content-Type.

P.S. Не забудьте импортировать URLSearchParams из @angular/http или он не будет работать.

Ответ 4

чтобы просто дать ему полный ответ:

login(username, password) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        let urlSearchParams = new URLSearchParams();
        urlSearchParams.append('username', username);
        urlSearchParams.append('password', password);
        let body = urlSearchParams.toString()
        return this.http.post('http://localHost:3000/users/login', body, {headers:headers})
            .map((response: Response) => {
                // login successful if there a jwt token in the response
                console.log(response);
                var body = response.json();
                console.log(body);
                if (body.response){
                    let user = response.json();
                    if (user && user.token) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('currentUser', JSON.stringify(user)); 
                    }
                }
                else{
                    return body;
                }
            });
    }

Ответ 5

Эти ответы устарели для тех, кто использует HttpClient, а не Http. Я начинал сходить с ума, думая: "Я сделал импорт URLSearchParams, но он все еще не работает без .toString() и явного заголовка!"

С HttpClient используйте HttpParams вместо URLSearchParams и обратите внимание на синтаксис body = body.append() для получения нескольких параметров в теле, поскольку мы работаем с неизменяемым объектом:

login(userName: string, password: string): Promise<boolean> {
    if (!userName || !password) {
      return Promise.resolve(false);
    }

    let body: HttpParams = new HttpParams();
    body = body.append('grant_type', 'password');
    body = body.append('username', userName);
    body = body.append('password', password);

    return this.http.post(this.url, body)
      .map(res => {
        if (res) {          
          return true;
        }
        return false;
      })
      .toPromise();
  }

Ответ 6

Если кто-то борется с angular версией 4+ (мой был 4.3.6). Это был образец кода, который работал у меня.

Сначала добавьте требуемый импорт

import { Http, Headers, Response, URLSearchParams } from '@angular/http';

Тогда для функции api. Это образец входа, который можно изменить в соответствии с вашими потребностями.

login(username: string, password: string) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', username);
    urlSearchParams.append('password', password);
    let body = urlSearchParams.toString()

    return this.http.post('http://localhost:3000/api/v1/login', body, {headers: headers})
        .map((response: Response) => {
            // login successful if user.status = success in the response
            let user = response.json();
            console.log(user.status)
            if (user && "success" == user.status) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user.data));
            }
        });
}

Ответ 7

У меня возникали проблемы с каждым подходом с использованием нескольких параметров, но он отлично работает с одним объектом

api:

    [HttpPut]
    [Route("addfeeratevalue")]
    public object AddFeeRateValue(MyValeObject val)

angular:

var o = {ID:rateId, AMOUNT_TO: amountTo, VALUE: value};
return this.http.put('/api/ctrl/mymethod', JSON.stringify(o), this.getPutHeaders());


private getPutHeaders(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new RequestOptions({
        headers: headers
        , withCredentials: true // optional when using windows auth
    });
}

Ответ 8

Ответ, предложенный Тьерри Темплиером, работал на меня. Спасибо

Вот что я сделал:

const data ='username=aaaa&password=bbb&grant_type=password';
const axiosConfig = {
  headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "Authorization": "Basic bmltcy1jbGllbnQ6bmltcy1zZWNyZXQ="
  }
};


axios.post('http://10.122.22.22:8001/oauth/token',
  data,axiosConfig
  ).then(posts => {
    console.log('axios Data in server', posts);
    res.status(200);
  })
  .catch((err)=> {
    console.log('Error:::::::', err);
  }
);

Ответ 9

Я приземлился здесь, когда пытался сделать подобное. Для типа контента application/x-www-form-urlencoded вы можете попробовать использовать это для тела:

var body = 'username' =myusername & 'password'=mypassword;

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