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

问题描述

我正在开发一个 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`);
}

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

标签： angular5interceptorangular6angular-http-interceptorsangular-httpclient

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

问题描述

解决方案

推荐阅读