Angular - 连接到代理服务器并获得响应，但随后显示尝试代理时发生错误：localhost to actual server

Question

我是 Angular(2,4) 的新手。 我试图连接到代理服务器。

项目根目录新增proxy.config.json

{
    "/api/*": {
        "target": "http://<server_ip_address>:<port>",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug"
    }
}

然后在 package.json start添加代理配置

"scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.config.json",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },

现在在组件中我有一个连接到服务器的登录方法。

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

在身份验证服务中，我有以下代码。

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

连接工作正常。 服务器以正确的 JSON 数据响应。 但我将无法登录。

真正的问题

有点奇怪。 有时它工作正常，但大多数情况下即使在正确连接到服务器后它也会显示问题。 服务器响应 JSON 数据。 然后在终端控制台中显示

[HPM] 尝试将请求 /api/v1/login 从 localhost:4200 代理到 http://: (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) 时发生错误

如果我检查 chrome.network 控制台，请求的状态是确定的。 但在预览选项卡中，它显示来自服务器的 JSON，然后附加以下字符串“尝试代理时发生错误：localhost:4200/api/v1/login”

{"name":"something","id":"12sde"}Error occured while trying to proxy to: localhost:4200/api/v1/login

因为 JSON 解析出错。

为什么问题有时发生而不总是发生？ 真正的问题是什么？

PS ：我正在使用 angular - 4.0.0，angular-cli 1.0.2

Answer 1

当您使用 Angular CLI 时，您使用的是 Webpack Dev Server：链接到他们的 Github。 您所做的只是将代理文件的路径传递到 CLI，然后 CLI 会下载它并将其传递到 webpack-dev-server。

在此问题上，据报道删除“/api/*”中的 * 可能会解决您的问题。

Answer 2

我也有这个问题，最后我添加了一个函数来过滤响应：

private parseResponse(response) {
   return JSON.parse(response['_body'].replace(/}Error.*/, '}'))
}

这里有一些参考：

https://github.com/angular/angular-cli/wiki/stories-proxy

https://github.com/angular/angular-cli/issues/889#issuecomment-290112673

希望你能找到更好的解决方案

---

使用HttpClient而不是 Http

Answer 3

请确保您添加http://localhost:yourPort/ => beforeYourUrl

Answer 4

try to add "Connection": "keep-alive" to your proxy.config.json like mentioned below

{
    "/api/*": {
        "target": "http://<server_ip_address>:<port>",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "headers": {
            "Connection": "keep-alive"
        }
    }
}

Answer 5

将我的节点版本从当前版本降级到推荐版本帮助我解决了类似的问题。