离子角http帖子在设备上不起作用，但在浏览器上可以正常工作

Question

我正在使用离子角度应用程序，并且在使用离子服务的浏览器上进行测试时，发布请求正常运行，但是在Anroid设备或仿真器上执行后，该请求将无法正常工作。

后端是在Windows服务器上使用苗条php和xampp的rest api

Android设备中请求的响应为：

{“ headers”：{“ normalizedNames”：{}，“ lazyUpdate”：null，“ headers”：{}}，“ status”：0，“ statusText”：“未知错误”，“ url”：“ http ：// <> /ws_login.php/login“，” ok“：false，”名称“：” HttpErrorResponse“，” message“：” http对http：// <> /ws_login.php/login的响应失败：0未知错误“，”错误“：{” isTrusted“：true}}]

我的登录代码如下：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClientModule, HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthConstants } from '../config/auth-constants';
import { ToastService } from './../services/toast.service';
import { LoadingService } from './../services/loading.service';
import { StorageService } from './../services/storage.service';
import { environment } from '../../environments/environment';

@Component({
    selector: 'app-login',
    templateUrl: './login.page.html',
    styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
    data = {
        user : '',
        pass : ''
    }

    constructor(
        public http: HttpClient, 
        private router: Router, 
        private toastService: ToastService,
        private loadingService: LoadingService,
        private storageService: StorageService
    ) { }

    ngOnInit() {
        this.storageService.get(AuthConstants.AUTH).then(
            data => data?this.router.navigate(["home"]):null
        )
    }

    login() {
        var headers = new HttpHeaders();
        headers.append("Accept", 'application/json');
        headers.append('Content-Type', 'application/json' );
        const requestOptions = { headers: headers };

        if(this.data.user == "" || this.data.pass == "")
            return this.toastService.presentToast("Debe completar ambos campos", "danger");

        this.loadingService.showLoading("Iniciando sesión");
        console.log(environment.apiUrl+'ws_login.php/login');
        this.http.post(environment.apiUrl+'ws_login.php/login', this.data, requestOptions).subscribe(
            resp => {
                this.loadingService.hideLoading();
                if(resp){
                    if(resp['error'] == 1)
                        this.toastService.presentToast(resp['mensaje'], "danger");
                    else{
                        this.storageService.store(AuthConstants.AUTH, 1);
                        this.toastService.presentToast("Sesión iniciada con éxito", "success");
                        this.router.navigate(["home"]);
                    }
                }
                else
                    this.toastService.presentToast("Error de red", "danger");
            }, 
            error => {
                this.data.user = JSON.stringify(error);
                this.loadingService.hideLoading();
                this.toastService.presentToast("Error de red", "danger");
            }
        );/*
        console.log(AuthConstants.AUTH);
        AuthConstants.AUTH = {id: 1};*/
        //this.router.navigate(["home"]);
    }
}

我还使用设备上的rest应用程序测试了api，并且没有问题时使用了相同的URL答案。

我将android：usesCleartextTraffic =“ true”添加到Androd清单，但这不是解决方案。

这里的离子信息

Ionic:

   Ionic CLI                     : 6.3.0 (C:\Users\Manu\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.0
   @capacitor/core : 2.0.0

Utility:

   cordova-res : 0.11.0
   native-run  : 0.3.0

System:

   NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10

谢谢！

Answer 1

由于该错误表明您正在发布到http://<>/ws_login.php/login，所以我推测当您部署到移动设备时，环境变量apiUrl中存在错误。如果您在开发人员机器上提供应用程序，则需要使用environment.ts来获取变量。也许您在生产中为手机构建了应用程序，因此没有获得正确的环境变量（因为Ionic然后使用了environment.prod.ts？

Answer 2

显然，在本地设备和仿真器上执行时，Angular httpClient存在一些问题，我的解决方案是将请求迁移到离子本地http。

感谢您的帮助！