Add Custom Headers to Angular Report Viewer REST API Calls

Environment

Product	Progress® Telerik® Reporting
Report Viewer	Angular

Description

I need to provide custom headers with every API call made by the Angular Report Viewer. My goal is to add an authorization token. I add the custom header via the interceptor token-http-interceptor.service.ts. However, the header is not added to the calls made by the Angular Report Viewer.

Solution

The Angular Report Viewer is a wrapper of the HTML5 Report Viewer, which is a jQuery widget and not a native Angular component. That's why you cannot add custom headers the Angular way - via the HTTP interceptor. In this article, we suggest two possible solutions.

Solution 1

The Angular Report Viewer comes with out-of-the-box support for an authenticationToken option. This option adds an Authorization header for every request to the REST service.

Solution 2

The second solution is to add the custom headers to the REST API calls of the Angular Report Viewer with jQuery's ajaxSetup function:

The following code represents one possible approach that can be used in the component with the Angular report viewer:

ngOnInit(): void {
    let $: any = (window as any)["jQuery"];
    $.ajaxSetup({xhrFields: { withCredentials: true } });
}