Winkel - Verbindung zum Proxy-server und bekommt die Antwort, aber zeigt dann Fehler aufgetreten, während versucht, proxy für: localhost, um den tatsächlichen server
Ich bin neu Eckig(2,4). Ich habe versucht, eine Verbindung zum proxy-server.
Hinzugefügt proxy.config.json
im Projekt-root-Verzeichnis
{
"/api/*": {
"target": "http://<server_ip_address>:<port>",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
Dann die proxy-config im start
im Paket.json
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Nun in der Komponente-ich habe eine login-Methode zum server zu verbinden.
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");
});
}
}
In Authentication Service habe ich folgenden code.
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);
}
}
Funktioniert die Verbindung einwandfrei. Der server antwortet mit der richtigen JSON-Daten. Aber ich wäre in der Lage, t login.
Echtes Problem
Es"s komisch. Manchmal funktioniert es, aber zeigt Sie meist sogar Frage nach der Verbindung zum server einwandfrei. Der server antwortet mit JSON-Daten. Dann im terminal-Konsole zeigt es
[HPM] Fehler beim proxy-request /api/v1/login von " localhost:4200 http://: (ECONNRESET) (https
://nodejs.org/api/errors.html#errors_common_system_errors)
Wenn ich den chrome Netz-Konsole, die den status der Anfrage ist OK. Aber in der Vorschau-Registerkarte, zeigt es JSON vom server und fügt es mit folgenden string "- Fehler aufgetreten, während versucht, proxy für: localhost:4200/api/v1/login"
{"name":"something","id":"12sde"}Error occured while trying to proxy to: localhost:4200/api/v1/login
Weil das JSON-parsing-Fehler bekommt.
Warum passiert manchmal und nicht immer? Und was ist das eigentliche Problem?
P. S.: ich bin mit Winkel - 4.0.0 -, Winkel-cli 1.0.2
- also der Fehler passiert, weil ungültiges JSON.
- Parse-Fehler passiert, weil der JSON. Aber das Problem mit der Verbindung denke ich
- Wahrscheinlich werden Ihre back-end gibt nicht eine json-Antwort. Vielleicht ist es nicht bereit zu dienen Anfrage - Neustart?
- versuchen Sie zum senden von Anforderungen mit einem anderen tool (Briefträger, curl), und überprüfen Sie das Ergebnis
- Hey @iCode, hast du es lösen. Ich habe das gleiche Problem
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie mit dem Winkel-CLI, verwenden Sie das Webpack Dev-Server : Link zu Ihrer Github. Alles, was Sie tun ist, übergeben Sie den Pfad zu Ihrem proxy-Datei in der Kommandozeile, die dann downloadet es und übergibt es in die webpack-dev-server.
Auf dieses Problem, es wird berichtet, dass das entfernen des * in "/api/*" könnte dein problem lösen.
Ich hatte auch dieses problem, schließlich habe ich noch eine Funktion hinzufügen filtern Sie die Antwort:
Hier sind einige refs:
https://github.com/angular/angular-cli/wiki/stories-proxy
https://github.com/angular/angular-cli/issues/889#issuecomment-290112673
Hoffe, Sie finden konnte, eine bessere Lösung
verwenden HttpClient anstelle von Http