首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用x-www-form-urlencoded强制Angular2开机自检

如何使用x-www-form-urlencoded强制Angular2开机自检
EN

Stack Overflow用户
提问于 2016-10-05 07:36:28
回答 6查看 91.4K关注 0票数 80

我有一个项目需要使用Angular2 (最终版)来发布到一个旧的、遗留的Tomcat7服务器上,该服务器使用.jsp页面提供了一个有点REST-ish的API。

当项目只是一个执行AJAX请求的简单JQuery应用程序时,这种方法工作得很好。然而,该项目的范围已经扩大到需要使用更现代的框架进行重写。Angular2看起来非常适合这项工作,但有一个例外:它拒绝使用任何选项来执行POST请求,而只是作为表单数据,它不会提取表单数据。应用编程接口期望所有内容都经过request.getParameter("param")编码,依赖于Java语法来提取各个字段。

这是我的user.service.ts中的一个片段:

代码语言:javascript
复制
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));
                }
            }
        );
    }
}

无论我将头部内容类型设置为什么,它最终总是作为非编码的表单数据到达。它不支持我设置的头文件。

还有没有人遇到过这种情况?如何使用request.getParameter("param")强制Angular2以旧Java API可以读取的格式发布数据

编辑:对于将来发现这一点的任何其他人来说,解决方案实际上非常简单。设置帖子的正文如下:

代码语言:javascript
复制
let body = `username=${username}&password=${password}`;`

请参阅下面Brad的示例。

EN

回答 6

Stack Overflow用户

发布于 2019-01-03 01:15:25

这就是我使用Angular 7时的工作原理:

代码语言:javascript
复制
const payload = new HttpParams()
  .set('username', username)
  .set('password', password);

this.http.post(url, payload);

这种方法不需要显式地设置头部。

请注意,HttpParams对象是不可变的。所以这样做是行不通的,它会给你一个空虚的身体:

代码语言:javascript
复制
const payload = new HttpParams();
payload.set('username', username);
payload.set('password', password);

this.http.post(url, payload);
票数 31
EN

Stack Overflow用户

发布于 2019-01-08 17:18:54

我在这个问题上工作了几个小时后找到了这个解决方案。

代码语言:javascript
复制
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);
  }));

}

票数 4
EN

Stack Overflow用户

发布于 2019-08-29 16:05:10

伙计们,我已经在这个问题上工作了一段时间了,多亏了Josh Morony https://www.joshmorony.com/integrating-an-ionic-application-with-a-nodejs-backend/的这篇文章,我找到了问题所在。基本上,当我开始测试我的api时,我使用的是POSTMAN,它工作得很好,但当使用Ionic Angular实现它时,它就成了一个问题。这篇文章中的解决方案只是关于导入body-parser,并在服务器端的根文件(索引)上使用它作为应用程序中间件,就像这个app.use(bodyParser.json())

希望这能有所帮助,谢谢!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39863317

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档