Skip to content

Commit efeed07

Browse files
petar-i-todorovdnikolov-prg
petar-i-todorov
and
dnikolov-prg
authored
docs: update custom http headers kb (#1741)
* docs: update custom http headers kb * Update custom-headers-with-reportviewer-rest-api-calls.md --------- Co-authored-by: Dimitar Nikolov <[email protected]>
1 parent 6e9ac46 commit efeed07

File tree

1 file changed

+89
-18
lines changed

1 file changed

+89
-18
lines changed

‎knowledge-base/custom-headers-with-reportviewer-rest-api-calls.md‎

Lines changed: 89 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Add Custom Headers to Angular Report Viewer REST API Calls
3-
description: "Learn How to Pass Custom Headers Along with the Telerik Report Viewer REST API Calls from an Angular Application."
2+
title: Add HTTP Headers to HTML5-Based Report Viewer REST API Calls
3+
description: "Learn how to attach HTTP headers, such as authorization tokens, to REST API requests made by Telerik HTML5-based report viewers."
44
type: how-to
5-
page_title: Pass Custom Headers with the Angular Viewer REST API Calls
6-
slug: custom-headers-with-reportviewer-rest-api-calls
5+
page_title: Add HTTP Headers to HTML5-Based Report Viewer REST API Requests
6+
slug: http-headers-with-reportviewer-rest-api-calls
77
position:
88
tags:
99
ticketid: 1474331
@@ -19,35 +19,106 @@ res_type: kb
1919
<td>Progress® Telerik® Reporting</td>
2020
</tr>
2121
<tr>
22-
<td>Report Viewer</td>
23-
<td>Angular</td>
22+
<td>Version</td>
23+
<td>Any</td>
2424
</tr>
2525
</tbody>
2626
</table>
2727

2828

2929
## Description
3030

31-
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.
31+
This article explains how to include HTTP headers—such as authorization tokens—in the REST API requests made by HTML5-based report viewers.
3232

33-
## Solution
33+
It applies to the following viewers:
3434

35-
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.
35+
- [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%})
36+
- [HTML5 MVC Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-asp.net-mvc-report-viewer/overview%})
37+
- [HTML5 WebForms Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-asp.net-web-forms-report-viewer/overview%})
38+
- [Angular Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/angular-report-viewer/angular-report-viewer-overview%})
39+
- [ReactJS Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/react-report-viewer/react-report-viewer-overview%})
40+
- [Blazor Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/blazor-report-viewer/overview%})
3641

37-
### Solution 1
42+
## Solution 1
3843

39-
The Angular Report Viewer comes with out-of-the-box support for an [*authenticationToken* option]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/angular-report-viewer/api-reference/options%}). This option adds an `Authorization` header for every request to the REST service.
44+
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]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%}).
4045

41-
### Solution 2
46+
>note 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.
4247
43-
The second solution is to add the custom headers to the REST API calls of the Angular Report Viewer with *jQuery's* [ajaxSetup](https://api.jquery.com/jquery.ajaxsetup/) function:
48+
## Solution 2
4449

45-
The following code represents one possible approach that can be used in the component with the Angular report viewer:
50+
>note 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.
4651
52+
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:
53+
54+
### Telerik Reporting Q2 2025+
55+
56+
Starting from `19.1.25.521`, the HTML5-based report viewers rely on the browser's built-in [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to issue their requests to the Reporting REST service. To add custom HTTP headers to the requests, you can override the [window.fetch() method](https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch) as follows:
57+
58+
````TypeScript
59+
const originalFetch = window.fetch;
60+
61+
window.fetch = async function (
62+
input: RequestInfo | URL,
63+
init?: RequestInit
64+
): Promise<Response> {
65+
66+
const headers = new Headers(init?.headers || {});
67+
68+
if (typeof input === "string" && input.includes('api/reports')) {
69+
headers.set('X-Custom-Header', 'YourHeaderValue');
70+
}
71+
72+
const modifiedInit: RequestInit = {
73+
...init,
74+
headers
75+
};
76+
77+
return originalFetch(input, modifiedInit);
78+
};
79+
````
4780
````JavaScript
48-
ngOnInit(): void {
49-
let $: any = (window as any)["jQuery"];
50-
$.ajaxSetup({xhrFields: { withCredentials: true } });
51-
}
81+
const originalFetch = window.fetch;
82+
83+
window.fetch = async function (input, init?) {
84+
85+
const headers = new Headers(init?.headers || {});
86+
87+
if (typeof input === "string" && input.includes('api/reports')) {
88+
headers.set('X-Custom-Header', 'YourHeaderValue');
89+
}
90+
91+
const modifiedInit = {
92+
...init,
93+
headers
94+
};
95+
96+
return originalFetch(input, modifiedInit);
97+
};
5298
````
5399

100+
### Telerik Reporting Q1 2025 Or Older
101+
102+
Before the [2025 Q2 release](https://www.telerik.com/support/whats-new/reporting/release-history/progress-telerik-reporting-2025-q2-19-1-25-521), the report viewer implementation relied on jQuery-based requests. To add custom HTTP headers in this scenario, you can use jQuery's [ajaxSetup()](https://api.jquery.com/jquery.ajaxsetup/) function:
103+
104+
````TypeScript
105+
const $: any = (window as any)["jQuery"];
106+
107+
$.ajaxSetup({
108+
beforeSend: function (xhr: XMLHttpRequest) {
109+
xhr.setRequestHeader('X-Custom-Header', "CustomValue");
110+
}
111+
});
112+
````
113+
````JavaScript
114+
$.ajaxSetup({
115+
beforeSend: function (xhr: XMLHttpRequest) {
116+
xhr.setRequestHeader('X-Custom-Header', "CustomValue");
117+
}
118+
});
119+
````
120+
121+
122+
## See Also
123+
124+
* [Add Custom Headers to Responses of the Reporting REST Service]({%slug add-custom-headers-to-responses-of-rests-service%})

0 commit comments

Comments
 (0)