Angular 6 Http 拦截器仅适用于具有相同端口的请求 api 请求

Question

我正在开发一个 SPA 项目，客户端与后端分开托管。我的 angular 项目（客户端）托管在 localhost:4200 上，我的网站 api（后端）托管在 localhost:58395 上。 我想通过 Angular 6 创建一个 logging/auth 拦截器所以我按照在线教程并在我自己的项目中仔细尝试。但是，我的日志拦截器或 auth 拦截器只会记录 HttpClient.Get 和 api url in localhost:4200 的请求，尽管我的网络 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`);
}

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

Answer 1

我想您需要代理配置。这是 angular-cli

的文档

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

Angular 6 Http 拦截器仅适用于具有相同端口的请求 api 请求

Angular 6 Http Interceptor only works on request with same port api request

interceptor

angular-http-interceptors

angular-httpclient

angular5

angular6