Add HTTP Headers to HTML5-Based Report Viewer REST API Calls
Environment
| Product | Progress® Telerik® Reporting |
| Version | Any |
Description
This article explains how to include HTTP headers—such as authorization tokens—in the REST API requests made by HTML5-based report viewers.
It applies to the following viewers:
- HTML5 Report Viewer
- HTML5 MVC Report Viewer
- HTML5 WebForms Report Viewer
- Angular Report Viewer
- ReactJS Report Viewer
- Blazor Report Viewer
Solution 1
All HTML5-based report viewers support an authentication token configuration option that automatically appends a Bearer token to the Authorization header of each request sent to the Telerik Reporting REST service. For example, the HTML5 Report Viewer includes an authenticationToken option.
The exact casing or naming of this option may vary across different viewer implementations. For accurate usage, refer to the specific documentation for the viewer you are integrating.
Solution 2
In both cases, ensure that the TS/JS code is executed before the report viewer is initialized, so that the overridden fetch logic takes effect during the initialization process.
The second solution is to add custom headers to the REST API calls of the HTML5 report viewer. Based on the version you are on, you can follow either of these approaches:
Telerik Reporting Q2 2025+
Starting from 19.1.25.521, the HTML5-based report viewers rely on the browser's built-in Fetch API to issue their requests to the Reporting REST service. To add custom HTTP headers to the requests, you can override the window.fetch() method as follows:
const originalFetch = window.fetch;
window.fetch = async function (
input: RequestInfo | URL,
init?: RequestInit
): Promise<Response> {
const headers = new Headers(init?.headers || {});
if (typeof input === 'string' && input.includes('api/reports')) {
headers.set('X-Custom-Header', 'YourHeaderValue');
}
const modifiedInit: RequestInit = {
...init,
headers
};
return originalFetch(input, modifiedInit);
};
const originalFetch = window.fetch;
window.fetch = async function (input, init) {
const headers = new Headers(init?.headers || {});
if (typeof input === 'string' && input.includes('api/reports')) {
headers.set('X-Custom-Header', 'YourHeaderValue');
}
const modifiedInit = {
...init,
headers
};
return originalFetch(input, modifiedInit);
};
Telerik Reporting Q1 2025 or Earlier
Before the 2025 Q2 release, the report viewer implementation relied on jQuery-based requests. To add custom HTTP headers in this scenario, you can use jQuery's ajaxSetup() function:
const $: any = (window as any)['jQuery'];
$.ajaxSetup({
beforeSend: function (xhr: XMLHttpRequest) {
xhr.setRequestHeader('X-Custom-Header', 'CustomValue');
}
});
$.ajaxSetup({
beforeSend: function (xhr: XMLHttpRequest) {
xhr.setRequestHeader('X-Custom-Header', 'CustomValue');
}
});