New to Telerik Reporting? Download free 30-day trial

How to Pass Custom Headers Along with Report Viewer REST API Calls from Angular Application

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 (unverified)

The second solution is to add the custom headers to the REST API calls of the Angular Report Viewer with jQuery.

Note

This solution is not verified.

The following code represents one possible approach:

setCustomHeaders(): void {
  $.ajaxSetup({
    headers: {
      Token: this.loginService.getToken(),
      'X-RequestId': 'request-Report-123456'
    }
  });
}
In this article