Angular 6 Http Interceptor 仅适用于具有相同端口 api 请求的请求答案

【问题标题】：Angular 6 Http Interceptor only works on request with same port api requestAngular 6 Http Interceptor 仅适用于具有相同端口 api 请求的请求
【发布时间】：2018-07-27 13:57:26
【问题描述】：

我正在开发一个 客户端与后端分开托管的 SPA 项目。我的 Angular 项目（客户端）托管在 localhost:4200 上，我的 Web api（后端）托管在 localhost:58395 上。 我想通过 Angular 6 创建一个日志记录/身份验证拦截器，所以我跟着在线教程并在我自己的项目中仔细尝试。但是，我的日志拦截器或身份验证拦截器只会使用 HttpClient.Get 使用 localhost:4200 中的 api url 记录请求，虽然我的 web api 请求成功返回，但它没有被我的日志拦截器捕获.. .我想知道这是否是拦截器的工作方式，或者我做错了什么，如果我无法捕获对远程 api 的请求，我将无法记录或附加我的令牌...

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } from '@angular/common/http';
import { finalize, tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        const startTime = Date.now();
        let status: string;

        return next.handle(req).pipe(
            tap(
                event => {
                    status = '';
                    if (event instanceof HttpResponse) {
                        status = 'succeeded';
                    }
                },
                error => status = 'failed'
            ),
            finalize(() => {
                const elapsedTime = Date.now() - startTime;
                const message = req.method + ' ' + req.urlWithParams + ' ' + status
                    + ' in ' + elapsedTime + 'ms';

                this.logDetails(message);
            })
        );
    }
    private logDetails(msg: string) {
        console.log('LogginInterceptor: ', msg);
    }
}

在我的模块提供程序中，我有：

{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }

我的日志拦截器只捕获了本地请求：

this.httpClient.get('http://localhost:4200/assets/api/langs/us.json)

LogginInterceptor:  GET http://localhost:4200/assets/api/langs/us.json succeeded in 10ms

我的远程请求通过

loadIOptionMembersRelationship(): Observable<IOptionResponse> {
        return this.httpClient.get<IOptionResponse>(`http://localhost:58395/api/member/IOptionMemberRelationship`);
}

没有以某种方式在日志拦截器中被捕获...

【问题讨论】：

拦截器应该可以正常工作，因为它通过 localhost:4200 捕获了我的一个请求，而另一个通过 localhost:58395 的请求没有被捕获，添加标头的结果相同...
你有没有得到这个问题的答案？

标签： angular5 interceptor angular6 angular-http-interceptors angular-httpclient

【解决方案1】：

我猜你需要一个代理配置。这是 angular-cli 的文档

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

【讨论】：

谢谢！代理配置似乎会将所有请求从一台服务器重定向到另一台服务器，（假设我们有一台服务器在 localhost:3000/api 上运行，我们希望所有对 localhost:4200/api 的调用都转到该服务器。），但我的部分请求会去到服务器 A，我的部分请求将发送到服务器 B 或 C...我不确定它是否可以通过只重定向单个服务器的配置来工作。而且我没有看到其他人或教程在正常工作时具有该配置..