Angular - 连接到代理服务器并获得响应，但随后在尝试代理时显示错误:本地主机到实际服务器 [英] Angular - Connects to Proxy server and gets response but then shows Error occured while trying to proxy to: localhost to actual server

问题描述

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

I'm new to Angular(2,4). I was trying to connect to proxy server.

在项目根目录添加proxy.config.json

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

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

Then added the proxy config in start in package.json

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

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

Now in component I have a login method to connect to server.

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 I have following 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);
    }
}

连接正常.服务器以正确的 JSON 数据进行响应.但我将无法登录.

The connection works fine. The server responds with proper JSON data. But I would be able t login.

真正的问题

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

It''s weird. Sometimes it works fine, but mostly it shows issue even after connecting to server properly. The server responds with JSON data. Then in terminal console it shows

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

如果我检查 chrome 网络控制台，请求的状态是 OK. 但在预览选项卡中，它显示来自服务器的 JSON，然后附加以下字符串尝试代理时发生错误到:本地主机:4200/api/v1/login"

If I check the chrome network console, the status of request is OK. But in the preview tab, it shows JSON from server and then it appends with following string "Error occured while trying to proxy to: localhost:4200/api/v1/login"

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

因为 JSON 解析出错.

Because of that JSON parsing gets error.

为什么问题有时会发生而不总是发生?实际问题是什么?

Why issue happens sometimes and not always? And what's the actual issue?

P.S.:我使用的是 angular - 4.0.0，angular-cli 1.0.2

P.S.: I'm using angular - 4.0.0, angular-cli 1.0.2

推荐答案

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

When you are using the Angular CLI, you are using the Webpack Dev Server : Link to their Github. All you are doing is passing the path to your proxy file into the CLI, which then downloads it and passes it into webpack-dev-server.

在这个问题上，据报道删除*"/api/*" 可能会解决您的问题.

On this issue, it's reported that removing the * in "/api/*" might fix your problem.

这篇关于Angular - 连接到代理服务器并获得响应，但随后在尝试代理时显示错误:本地主机到实际服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！