離子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函數：

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的更多信息 。 您只有在瀏覽器上進行測試時才能面對它。 在設備上運行它不會給您帶來麻煩。

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);


    }

    }