Angular2 - http: // localhost: 4200/être ajouté avec api call pourquoi?

Question

commencez juste à apprendre angular2 suivi le tutoriel heroes. Je fais une demande de création, l'URL est parfaitement bien, les paramètres sont corrects. Mais je suis encore confus pourquoi http://localhost:4200/ est en cours d'ajout avec mon appel API, et à cause de cela l'URL est totalement changé, et les appels ont échoué.Permettez de faire la lumière sur ce problème. J'ai beaucoup googlé mais j'ai pu trouver la raison.

Ma méthode Create

create(user: object): Promise<any> { 
    return this.http 
     .post('localhost/usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers }) 
     .toPromise() 
     .then(res => res.json().data) 
     .catch(this.handleError); 
} 

Answer 1

Vous devez ajouter votre protocole pour votre URL. Dans le cas contraire, il est une URL relative:

.post('http://localhost/usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers }) 

Answer 2

http://localhost:4200/ est l'URL de la page est initialement chargé.

Vous devez soit ajouter l'URL complète comme

.post('//localhost:4200/usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers }) 

ou

.post('http://localhost:4200/usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers }) 

ou pas partie hôte du tout

.post('usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers }) 

Answer 3

expérimenté ce problème et résolu par la séparation des préoccupations en créant un fichier app.settings.ts qui contiendra le point de fin où l'API est ser ved de

export class AppSettings { 
    public static get FOLDER_ENDPOINT(): string { 
    return 'http://127.0.0.1:8000'; 
    } 
} 

Ensuite, créez un service et importer les app.settings comme ci-dessous

import { Injectable } from '@angular/core'; 
import { HttpClient } from "@angular/common/http"; 
import { Observable } from "rxjs/Observable"; 
import { HttpHeaders } from '@angular/common/http/src/headers'; 
import { Http, Response, RequestOptions, ResponseContentType } from 
'@angular/http'; 
import 'rxjs/Rx'; 
import { AppSettings } from '../app.settings'; 


@Injectable() 
export class FormsubmitService { 

constructor(private http: HttpClient) { } 

listAll(data: any): Observable<any> { 
    return this.http 
    .get(`${AppSettings.FOLDER_ENDPOINT}/list-files`); 
} 
} 

Dans votre app.component.html ajouter une fonction qui déclenche l'appel api

<button (click)="loadData()" class="btn btn-primary pull-right">load data</button> 

Ensuite, dans votre application.component.ts vous écrivez votre méthode

loadData() { 
    this._fbService.listAll('').subscribe(data => { 
    console.log('Data returned', data); 
    }); 
}