Angulaires - se Connecte à un serveur Proxy et obtient la réponse, mais montre ensuite Erreur s'est produite lors de la tentative de proxy: localhost serveur
Je suis nouveau sur Angulaire(2,4). J'ai été d'essayer de se connecter au serveur proxy.
Ajouté proxy.config.json
dans le répertoire racine du projet
{
"/api/*": {
"target": "http://<server_ip_address>:<port>",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
Ensuite ajouté le proxy config dans start
dans le paquet.json
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Maintenant en composant, j'ai une méthode de connexion pour se connecter au serveur.
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertService, AuthenticationService } from '../services/index';
@Component({
moduleId: module.id.toString(),
templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
model: any = {};
loading = false;
returnUrl: string;
constructor(
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService,
private alertService: AlertService) { }
login() {
this.loading = true;
this.authenticationService.login(this.model.email, this.model.password)
.subscribe(data => {
localStorage.setItem('currentUser', JSON.stringify(data));
this.router.navigate([this.returnUrl]);
},
error => {
this.alertService.error(error);
this.loading = false;
},
() => {
console.log("Subscribed Else");
});
}
}
Dans le Service d'Authentification j'ai code suivant.
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class AuthenticationService {
headers = new Headers();
constructor(private http: Http) {
this.headers.append("Content-Type", "application/json");
}
login(email: string, password: string) {
return this.http.post('/api/v1/login', { email: email, password: password }, { headers: this.headers })
.map(this.extractData)
.catch(this.handleError);
}
private extractData(response: Response) {
let user = response.json();
return user;
}
private handleError(error: Response | any) {
//In a real world app, you might use a remote logging infrastructure
let errMsg: string;
let resMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
resMsg = body['message'];
console.log(body);
console.log(resMsg);
} else {
resMsg = error.message ? error.message : error.toString();
}
return Observable.throw(resMsg);
}
}
La connexion fonctionne très bien. Le serveur répond avec un bon de données JSON. Mais je voudrais être en mesure de t de connexion.
Réel Problème
Il"s bizarre. Parfois, il fonctionne très bien, mais surtout, il montre un problème, même après la connexion au serveur correctement. Le serveur répond avec des données JSON. Puis dans le terminal de la console il montre
[HPM] Erreur s'est produite lors de la tentative de demande de proxy /api/v1/connexion à partir de localhost:4200 http://: (ECONNRESET) (https
://nodejs.org/api/errors.html#errors_common_system_errors)
Si je coche chrome réseau de la console, le statut de la demande est OK. Mais dans l'onglet aperçu, il montre JSON depuis le serveur, et puis il ajoute avec chaîne suivante "Erreur s'est produite lors de la tentative de proxy: localhost:4200/api/v1/login"
{"name":"something","id":"12sde"}Error occured while trying to proxy to: localhost:4200/api/v1/login
Raison de parsing JSON obtient erreur.
Pourquoi le problème se produit parfois et pas toujours? Et quel est le réel problème?
P. S.: je suis en utilisant angulaires - 4.0.0, angulaires-cli 1.0.2
Parse erreur se produit en raison de JSON. Mais le problème avec la connexion, je suppose
Probablement votre back-end donne pas une réponse json. Peut-être il n'est pas prêt à servir de demande de redémarrage?
essayez d'envoyer des requêtes avec un autre outil (postman, curl) et de vérifier le résultat
Hey @iCode, avez-vous le résoudre. J'ai le même problème
OriginalL'auteur iCode | 2017-05-16
Vous devez vous connecter pour publier un commentaire.
Lorsque vous utilisez l'angle de la CLI, vous utilisez le Webpack Serveur de Dev : Lien vers leur Github. Tout ce que vous faites est le passage du chemin d'accès à votre fichier de proxy dans la CLI, puis télécharge et passe dans webpack-dev-serveur.
Sur ce problème, il a été rapporté que la suppression de la * "/api/*" pourrait résoudre votre problème.
OriginalL'auteur Rob
J'ai aussi eu ce problème, enfin je ajouter une fonction pour filtrer la réponse:
Voici quelques refs:
https://github.com/angular/angular-cli/wiki/stories-proxy
https://github.com/angular/angular-cli/issues/889#issuecomment-290112673
Espère que vous pourriez trouver une meilleure solution
utilisation HttpClient au lieu de Http
OriginalL'auteur Seven