Angular 4 个自定义请求 header

Question

正在使用 Angular 4 个应用程序。创建了用于向 api.

发送请求的 http 拦截器

@Injectable()
export class HttpRequestInteceptor implements HttpInterceptor {
    loginUserName = "";
    constructor(private router: ActivatedRoute) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {


        if (environment.Authentication == 1) {           
            // add a custom header


            const newRequest = req.clone({headers: req.headers.set('userName', '11111')});
            return next.handle(newRequest);
        }

        return next.handle(req);
    }
}

我已经在我的 app.module.ts 中配置了这个拦截器，如下所示

providers: {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpRequestInteceptor,
      multi: true
    }

这里我试图在 get 请求中传递一个自定义的 header 值，但是当我查看chrome.

我的 Asp.Net Web api 代码可以是。

HttpApplication app = (HttpApplication)sender;
string    user = app.Context.Request.Headers.GetValues("userName").First();

当我从邮递员和高级重置客户端访问 url 时，我在 web.api 代码中获取用户名值。

但是当我从 Angular 4 应用程序访问相同的 api url 时，我没有得到 header 值。

请帮我解决我的不足。

Answer 1

试试 setHeaders https://angular.io/api/common/http/HttpRequest#clone:

@Injectable()
export class HttpRequestInteceptor implements HttpInterceptor {
    loginUserName = "";
    constructor(private router: ActivatedRoute) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {


        if (environment.Authentication == 1) {           
            // add a custom header


            const newRequest = req.clone({
              setHeaders: { 'userName': '11111' }
            });
            return next.handle(newRequest);
        }

        return next.handle(req);
    }
}

Angular 4 个自定义请求 header

Angular 4 with custom request header

http

angular

angular4-httpclient