无法从 Ionic 应用程序发布 HTTP 请求

Posted 2023-03-08

【中文标题】无法从 Ionic 应用程序发布 HTTP 请求

【英文标题】：Unable to post HTTP request from Ionic application

【发布时间】：2017-08-19 19:00:34

【问题描述】：

我正在尝试使用 ionic 框架（目前）登录到我在本地托管的应用程序。

这是我用于登录的 nodejs 后端代码，用于 Web 应用程序，但现在我也在为 android 平台制作它

// process the login form
app.post('/login', passport.authenticate('local-login', 
    successRedirect: '/profile', // redirect to the secure profile section
    failureRedirect: '/login', // redirect back to the signup page if there is an error
    failureFlash: true // allow flash messages
));

ionic 中的 html 代码

    <ion-item>
        <ion-input type="text" placeholder="Email" name="email" [(ngModel)]="email"></ion-input>
    </ion-item>

    <ion-item>
        <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="password"></ion-input>
    </ion-item>

</ion-list>

调用的登录函数：

login() 
this.http.post('10.222.103.169:8080/login', JSON.stringify( email: this.email, password: this.password ))
    .map((response: Response) => 

        let user = response.json();
        console.log(user);
        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));
        
    

如果我对帖子使用 .subscribe 方法，则会出现错误 其他登录方式：

login() 
    this.http.post('10.222.103.169:8080/login', JSON.stringify( email: this.email, password: this.password ))
    .subscribe(data => 
        console.log(data);
    );

./LoginPage 类 LoginPage 中的运行时错误错误 - 导致：失败 在“XMLHttpRequest”上执行“打开”：无效的 URL

但链接正确且有效 现在的问题是它甚至没有向服务器发送 post 请求。

PS：我是 angular2 的新手。

【参考方案1】：

你必须按如下所示进行。这是post方法的Angular方式。希望代码是自我解释的。如果您需要任何帮助，请随时在下面发表评论。

      //login
      loginUser(email: string, password: string): Observable<any> 
        let headers = new Headers();
        headers.append('content-type', 'application/json');
        let body =  email: email, password: password ;
        let options = new RequestOptions( headers: headers );
        let url = this.authenticationEndPoint + encodeURI(username) + '&password=' + encodeURI(password);

        return this.http.post(url, body, options)
          .map(this.extractData)
          .catch(this.handleError);
      

 //to extract data
  private extractData(res: Response) 
    let body = res.json();
    return body || ;
  

  //to handle error
  private handleError(error: Response | any) 
    let errMsg: string;
    if (error instanceof Response) 
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `$error.status - $error.statusText || '' $err`;
     else 
      errMsg = error.message ? error.message : error.toString();
    
    console.error(errMsg);
    return Observable.throw(errMsg);
  

【讨论】：

这似乎不起作用，后端没有请求或弹出任何错误消息

什么都没有出现，在控制台中也没有向后端发送请求。我也尝试了let url = this.authenticationEndPoint 而不是let url = this.authenticationEndPoint + encodeURI(username) + '&password=' + encodeURI(password);，因为我已经在发布请求中发送带有正文参数的登录凭据

虽然$.ajax( type: "POST", url: "http://10.222.103.169:8080/login", data: email: "myemail", password: "wdwd" , success: function() console.log("success"); ); 这似乎有效

是的，你必须在那里发送一个javascript对象。不需要使用JSON.stringify()。

不确定当它使用 jquery post 方法进行身份验证时为什么它不能使用 angular post 方法

【参考方案2】：

将参数分配给 URLSearchParams 对象

 login() 
 let params = new URLSearchParams;
params.append('email',this.email);
params.append('password',this.password);
    this.http.post('10.222.103.169:8080/login',search:params )
        .map((response: Response) => 
            let user = response.json();
            console.log(user);
            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));
            
        
    

【讨论】：

在 post 请求中 URLSearchParams 是否可行？