Ionic HttpClient 获取请求

Question

我有一个 Restful API，当从邮递员那里获取 HttpRequest 到这个 API 时，它就像一个魅力，但是当我在 Ionic 上实现它时，我得到了这个错误：

ERROR Object { headers: {…}, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown url): 0 Unknown Error", error: error } vendor.js:1703:5
defaultErrorLogger http://localhost:8100/build/vendor.js:1703:5
ErrorHandler.prototype.handleError http://localhost:8100/build/vendor.js:1764:9
IonicErrorHandler.prototype.handleError http://localhost:8100/build/vendor.js:120941:9
next http://localhost:8100/build/vendor.js:5729:136
EventEmitter.prototype.subscribe/schedulerFn< http://localhost:8100/build/vendor.js:4576:36
SafeSubscriber.prototype.__tryOrUnsub http://localhost:8100/build/vendor.js:32170:13
SafeSubscriber.prototype.next http://localhost:8100/build/vendor.js:32117:17
Subscriber.prototype._next http://localhost:8100/build/vendor.js:32057:9
Subscriber.prototype.next http://localhost:8100/build/vendor.js:32021:13
Subject.prototype.next http://localhost:8100/build/vendor.js:39726:17
EventEmitter.prototype.emit http://localhost:8100/build/vendor.js:4556:24
onHandleError/< http://localhost:8100/build/vendor.js:5004:57
F</l</t.prototype.invoke http://localhost:8100/build/polyfills.js:3:14974
F</c</r.prototype.run http://localhost:8100/build/polyfills.js:3:10124
NgZone.prototype.runOutsideAngular http://localhost:8100/build/vendor.js:4930:54
onHandleError http://localhost:8100/build/vendor.js:5004:13
F</l</t.prototype.handleError http://localhost:8100/build/polyfills.js:3:15054
F</c</r.prototype.runTask http://localhost:8100/build/polyfills.js:3:10869
F</h</e.invokeTask http://localhost:8100/build/polyfills.js:3:16787
p http://localhost:8100/build/polyfills.js:2:27646
v http://localhost:8100/build/polyfills.js:2:27893

我创建了一个名为 AuthServiceProvider 的提供程序，这是提供程序代码：

    import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
let apiUrl = "http://pfeapi/api/v1/"
/*
Generated class for the AuthServiceProvider provider. 

See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class AuthServiceProvider {

constructor(public http: HttpClient) {
console.log('Hello AuthServiceProvider Provider');
}


public getData(type): Observable<any> {

    return this.http.get(apiUrl + type);


}

}

还有一个名为 Login 的登录函数：

Login(){
this.data = this.authServiceProvider.getData("users");
this.data.subscribe(data => {
//Username and Password verification code here
})
}

Answer 1

您遇到了 CORS 问题。您是在 chrome 上提供应用程序的，对吧？

在Win+R上运行以下命令

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

在此浏览器上提供应用程序并尝试执行GET 操作。它会完美运行。

您可以在 CORS here 上阅读更多信息。您只有在浏览器上进行测试时才会面对它。在设备上运行它不会给您带来麻烦。

Answer 2

该错误表明该 URL 未正确准备。我也可以在代码中看到它let apiUrl = "http://pfeapi/api/v1/" 你首先需要将这一行移到类中。其次，URL 格式不正确。应该是这样的：

 import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import 'rxjs/add/operator/toPromise';
    import { Observable } from 'rxjs/Observable';

    @Injectable()
    export class AuthServiceProvider {
    // The apiUrl below needs reformatting. This is, in any case, a wrong URL
    let apiUrl = "http://pfeapi/api/v1/";
    constructor(public http: HttpClient) {
    console.log('Hello AuthServiceProvider Provider');
    }


    public getData(type): Observable<any> {

        return this.http.get(apiUrl + type);


    }

    }