x-www-form-urlencoded를 사용하여 Angular2를 강제 POST하는 방법
Angular2(최종)를 사용하여 .jsp 페이지를 사용하여 다소 REST-ish API를 제공하는 오래된 레거시 Tomcat 7 서버에 게시해야 하는 프로젝트가 있습니다.
프로젝트가 단순한 JQuery 앱에서 AJAX 요청을 수행할 때는 잘 작동했습니다.하지만, 프로젝트의 범위가 점점 넓어져 더 현대적인 틀을 사용하여 다시 써야 할 것입니다.Angular2는 한 가지 예외를 제외하고는 작업에 매우 적합해 보입니다.API가 추출하지 않는 폼 데이터를 제외한 어떤 옵션도 사용하여 POST 요청을 수행하는 것을 거부합니다.API는 모든 것이 자바의 것에 의존하여 urlencoded 될 것으로 예상합니다.request.getParameter("param")구문을 사용하여 개별 필드를 추출합니다.
내 사용자.service.ts:에서 가져온 것입니다.
import { Injectable } from '@angular/core';
import { Headers, Response, Http, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class UserService {
private loggedIn = false;
private loginUrl = 'http://localhost:8080/mpadmin/api/login.jsp';
private headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
constructor(private http: Http) {}
login(username, password) {
return this.http.post(this.loginUrl, {'username': username, 'password': password}, this.headers)
.map((response: Response) => {
let user = response.json();
if (user) {
localStorage.setItem('currentUser', JSON.stringify(user));
}
}
);
}
}
헤더 내용 유형을 무엇으로 설정하든 항상 인코딩되지 않은 양식 데이터로 나타납니다.내가 설정하는 머리말을 존중하는게 아닙니다.
다른 사람이 이런 일을 겪었습니까?Angular2가 오래된 Java API를 사용하여 읽을 수 있는 형식으로 데이터를 게시하도록 강제하는 방법은 무엇입니까?request.getParameter("param")?
Angular > 4.3(New HTTP Client)의 경우 다음을 사용합니다.
let body = new URLSearchParams();
body.set('user', username);
body.set('password', password);
let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
this.http
.post('//yourUrl.com/login', body.toString(), options)
.subscribe(response => {
//...
});
예상대로 작동하기 위한 3가지 사항을 참고합니다.
- 신체에 URL 검색 파라미터 사용
- 본문을 문자열로 변환
- 머리글의 내용 유형 설정
주의:오래된 브라우저는 폴리필이 필요합니다!사용:npm i url-search-params-polyfill --save다음을 폴리필에 추가합니다.import 'url-search-params-polyfill';
업데이트 2020년 6월:이 답변은 4년이 지났으며 Angular의 API 변경으로 인해 더 이상 유효하지 않습니다.현재 버전 접근 방법에 대해서는 좀 더 최근 답변을 참고하시기 바랍니다.
이 작업은 다음을 사용하여 수행할 수 있습니다.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}`;
헤더 옵션을 다음과 같이 설정해야 합니다.
this.http.post(this.loginUrl, body, { headers: headers }).map(...);
여전히 답을 찾고 있는 분들을 위해 Angular 5와 HttpClient로 해결한 방법은 다음과 같습니다.
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('apiPath', formData);
컨텐츠 유형 헤더를 설정하지 마십시오. 각도가 이 문제를 해결해 줍니다!
이것이 Angular 7의 효과입니다.
const payload = new HttpParams()
.set('username', username)
.set('password', password);
this.http.post(url, payload);
이 접근 방식으로 헤더를 명시적으로 설정할 필요가 없습니다.
HttpParams 개체는 불변입니다.그래서 다음과 같은 것을 하는 것은 효과가 없을 것이고, 그것은 당신에게 빈 몸을 줄 것입니다.
const payload = new HttpParams();
payload.set('username', username);
payload.set('password', password);
this.http.post(url, payload);
각9
이것은 작동하는 코드입니다.
성공이 아닌 답변을 반환하려면 사용자에게 적합한 다른 옵션을 선택합니다.
let params = new HttpParams({
fromObject: { email: usuario.email, password: usuario.password, role: usuario.role },
});
let httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
};
return this.http.post(`${this.url}/usuario/signup`, params.toString(), httpOptions).pipe(
map(
(resp) => {
console.log('return http', resp);
return resp;
},
(error) => {
console.log('return http error', error);
return error;
}
)
);당신이 사용하는 문자열을 기억합니다.fromString아닌fromObject.
나는 이 문제에 대해 몇 시간 동안 작업한 끝에 이 해결책을 발견했습니다.
login(userName: string, password: string) {
const headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append( 'No-Auth', 'True');
const body = new URLSearchParams();
body.set('username', userName);
body.set('password', password);
body.set('grant_type', 'password');
return this.http.post(
this.baseUrl + '/token'
, body.toString()
, { headers: headers }
)
.pipe(map(res => res.json()))
.pipe(map(res => {
localStorage.setItem('auth_token', res.auth_token);
return true;
}))
.pipe(catchError((error: any) => {
return Observable.throw(error);
}));
}
각도 형태를 사용할 경우 대부분의 매개 변수가 개체로 전송되므로 로그인 함수에 이 개체가 있을 가능성이 높습니다.form.value = {username: 'someone', password:'1234', grant_type: 'password'}매개변수로서
이 객체를 x-www-form-url 부호화로 보내면 코드는
export class AuthService {
private headers = new HttpHeaders(
{
'Content-Type': 'application/x-www-form-urlencoded',
Accept: '*/*',
}
);
constructor(private http: HttpClient) { }
login(data): Observable<any> {
const body = new HttpParams({fromObject: data});
const options = { headers: this.headers};
return this.http.post(`${environment.baseUrl}/token`, body.toString(), options);
}
Angular 12의 경우, 이것이 저에게 효과적이었습니다.
options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
params = new HttpParams()
.set("client_id", "client_id")
.set("client_secret", "client_secret")
.set("grant_type", "grant_type")
.set("scope", "scope")
getToken(){
return this._http.post(`${URL}`, this.params, this.options)
}
또한 상단에 다음 사항을 가져오는 것을 기억하시기 바랍니다.import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
또한 다른 것과 달리 String()은 중복되므로 사용하지 않습니다.
얘들아 나는 이것에 대해 꽤 오랫동안 노력해왔고 조쉬 모로니 https://www.joshmorony.com/integrating-an-ionic-application-with-a-nodejs-backend/ 의 이 게시물 덕분에 나는 무엇이 문제인지 알아냈습니다.기본적으로 api 테스트를 시작했을 때는 POSTMAN을 사용하고 있었는데 완벽하게 작동하고 있었는데 Ionic Angular로 구현을 해보니 문제가 되었습니다.이 게시물의 솔루션은 가져오기에 관한 것입니다.body-parser이렇게 앱 미들웨어로 활용할 수 있습니다.app.use(bodyParser.json())서버측 루트 파일(인덱스)에 저장할 수 있습니다.
이것이 도움이 되기를 바랍니다, 감사합니다!
각8
const headers = new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
});
const params = new HttpParams();
params.set('username', 'username');
params.set('password', 'password');
this.http.post(
'https://localhost:5000/api',
params.toString(),
{ headers }
);
export class MaintenanceService {
constructor(private http: HttpClient) { }
//header de requete http
private headers = new HttpHeaders(
{ 'Content-Type': 'application/x-www-form-urlencoded' }
);
// requete http pour recuperer le type des maintenances
createMaintenance(data: createMaintenance){
const options = { headers: this.headers};
return this.http.post('api/v2/admin/maintenances', data, options ).subscribe(status=> console.log(JSON.stringify(status)));
}
let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
let body = new URLSearchParams();
body.set('userId', userId);
body.set('discussionId', discussionId);
언급URL : https://stackoverflow.com/questions/39863317/how-to-force-angular2-to-post-using-x-www-form-urlencoded
'programing' 카테고리의 다른 글
| jQuery.on('change'), 함수() {}이(가) 동적으로 생성된 입력에 대해 트리거되지 않음 (0) | 2023.11.02 |
|---|---|
| 릴리스 버전 iOS Swift에 대해 println()을 제거합니다. (0) | 2023.11.02 |
| 파일에 로컬 데이터 로드가 새 행을 추가하는 대신 mariadb 열 저장소의 이전 데이터를 바꿉니다. (0) | 2023.11.02 |
| Spring Controller @RequestBody 파일 업로드 가능합니까? (0) | 2023.10.28 |
| 유튜브 동영상 URL을 코드 내장으로 변환 (0) | 2023.10.28 |