POST 요청을하려고하는데 작동 할 수 없습니다.
testRequest() {
var body = 'username=myusername?password=mypassword';
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
this.http
.post('/api',
body, {
headers: headers
})
.subscribe(data => {
alert('ok');
}, error => {
console.log(JSON.stringify(error.json()));
});
}
기본적 으로이 http 요청 (아약스가 아님)을 html 형식에서 시작한 것처럼 복제하고 싶습니다.
URL : / api
매개 변수 : 사용자 이름 및 비밀번호
답변
본문이 application/x-www-form-urlencoded콘텐츠 유형에 맞지 않는 것 같습니다 . 이것을 사용해 볼 수 있습니다.
var body = 'username=myusername&password=mypassword';
도움이 되었기를 바랍니다, Thierry
답변
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 년 10 월 업데이트
에서 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()));
}
)
GET / DELETE 메서드
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()));
}
)
JSON application/json콘텐츠 유형의 경우
this.http.post('/api',
JSON.stringify({
username: username,
password: password,
})).subscribe(
data => {
alert('ok');
},
error => {
console.log(JSON.stringify(error.json()));
}
)
답변
Angular2의 이후 버전에서는 Content-Type올바른 유형의 객체 를 .NET Framework로 전달하는 경우 헤더 를 수동으로 설정 하고 본문을 인코딩 할 필요가 없습니다 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헤더를 설정합니다 .
추신 : 가져 오기 URLSearchParams를 잊지 마십시오 @angular/http. 그렇지 않으면 작동하지 않습니다.
답변
그래서 완전한 답을 만들기 위해 :
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's 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;
}
});
}
답변
이 답변은 Http가 아닌 HttpClient를 사용하는 사람들에게 모두 구식입니다. “URLSearchParams 가져 오기를 수행했지만 .toString () 및 명시 적 헤더 없이는 여전히 작동하지 않습니다!”라는 생각이 들기 시작했습니다.
HttpClient를 사용하면 URLSearchParams 대신 HttpParams를 사용 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();
}
답변
누구나 앵귤러 버전 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));
}
});
}
답변
angular:
MethodName(stringValue: any): Observable<any> {
let params = new HttpParams();
params = params.append('categoryName', stringValue);
return this.http.post('yoururl', '', {
headers: new HttpHeaders({
'Content-Type': 'application/json'
}),
params: params,
responseType: "json"
})
}
api:
[HttpPost("[action]")]
public object Method(string categoryName)
