角度4.3 HttpClient - HttpHeadersとインターセプターを正しく使うには？

Question

私はHttpRequestにヘッダを送る必要があります。

私はすでにここで検索しましたが、私はすでに見つかったいくつかの回答で試しましたが、どれも働いていませんでした。

ヘッダーがAPIに送信されていないため、clonedRequestオブジェクトを検査するとヘッダーが表示されません。それは私のコードです：

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    // Clone the request to add the new header. 
    const clonedRequest = req.clone(); 

    clonedRequest.headers.set("ModuleId", this.dnnContext.moduleId); 
    clonedRequest.headers.set("TabId", this.dnnContext.tabId); 

    // Pass on the cloned request instead of the original request. 
    return next.handle(clonedRequest); 
} 

私は何をしないのですか？

Answer 1

私は同様の問題&は（TypeError例外を：非オブジェクトで呼び出さCreateListFromArrayLike）あなたの第2回を考え出し直面している問題は、いくつかの 理由では、数値型を渡す場合（それは型チェックを持っていますが、VARタイプがanyがある場合、それは次のように通過する間に、あなたが文字列にそれを を変換することができますので、それは、このエラーがスローされます）、それはヘッダ（ModuleIdまたはあなたのケースではTabIdの値）私のためのケースだった&することができます：

const authReq = req.clone({ 
    headers: req.headers.set('ModuleId', this.dnnContext.moduleId.toString()).set('TabId', this.dnnContext.tabId.toString()) 
}); 
// Pass on the cloned request instead of the original request. 
return next.handle(authReq); 

github issueにも返信しました。

Answer 2

新しいHttpClientモジュールのクラスのインスタンスがであるため、となります。したがって、変更するすべてのプロパティを再割り当てする必要があります。これはあなたのケースで、以下に変換：

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    // Clone the request to add the new header. 
    const headers = req.headers.set("ModuleId", this.dnnContext.moduleId).set("TabId", this.dnnContext.tabId); 
    const clonedRequest= red.clone({ 
    headers: headers 
    }); 

    // Pass on the cloned request instead of the original request. 
    return next.handle(clonedRequest); 
}