Hello Radu,

Thank you for sharing the solution with appending the Authorization header.

Regarding the 'Preview' mode, when the reports are previewed in the Web Report Designer, that happens through the built-in HTML5 Report Viewer. This report viewer, unlike the Web Report Designer, performs the requests using the jQuery.ajax() function so the solution for the Web Report Designer's requests is not viable for the report viewer.

The HTML5 Report Viewer exposes a property named authenticationToken - HTML5 Report Viewer Options Overview - Telerik Reporting, which you may use to set the token to the report viewer. It will automatically be passed with the requests that the viewer makes. However, with v17.1.23.718, there is no easy way to access the designer's internal report viewer.

My recommendation is to update to the latest version of the product - Telerik Reporting - Progress® Telerik® Reporting 2024 Q1 (18.0.24.305) where the Web Report Designer now exposes an event through which you may configure the internal viewer's initialization options - viewerInitializing Event. Through this event, the viewer object can be accessed and you can thus set the token to its authenticationToken property, for example:

$(document).ready(function () {
    $("#webReportDesigner").telerik_WebReportDesigner({
        persistSession: false,
        toolboxArea: {
            layout: "list"
        },
        serviceUrl: "api/reportdesigner/",
        report: "Dashboard.trdp",
        // design/preview
        startMode: "design",
        viewerInitializing: onViewerInitializing
    }).data("telerik_WebReportDesigner");
});

function onViewerInitializing(e, args) {
    // e: jQuery event;
    // args: IViewerPreInitEventArgs ->
    //      reportViewerOptions: report viewer's options. All viewer's options available.

    args.reportViewerOptions.authenticationToken = "TOKEN"
}

If you do not wish to upgrade to the latest version and would prefer to use v17.1.23.718 version instead, it is possible to add custom headers, in this case the Authorization header, to each request made with $.ajax by using the $.ajaxSetup() function, e.g:

        $.ajaxSetup({
                headers: { "CustomHeader": "myValue" }
            });

I hope that at least one of the two approaches will work for your needs.

Regards,
Dimitar
Progress Telerik

Hello,

We have received reports that the workaround shared by Eric might not work after upgrading to the Telerik Reporting R1 2023 release.

In order to make that approach work for version R1 2023+(17.0.23.118+), the fetch overriding code needs to be changed to the following:

                                const fetchOverride = window.fetch;
				window.fetch = function (url, args) {
					// Get the parameter in arguments
					if (!args) {
						args = {
							headers: {
								Authorization: 'Bearer ' + authData.token,
							},
						};
					} else if (!args.headers || !args.headers.entries) {
						args.headers = {
							Authorization: 'Bearer ' + authData.token,
						};
					} else if (args.headers.entries) {
						args.headers = { ...args.headers, Authorization: 'Bearer ' + authData.token };
					}
					// Intercept the parameter here
					return fetchOverride(url, args);
				};

Regards,
Dimitar
Progress Telerik

Hi Lukas,

Until this gets implemented, I wanted to provide your work around for anyone else that may come across the same issue as it has been appearing more often.

The following code will add the authentication header to each request using the jQuery.ajaxPrefilter() event. 

jQuery.ajaxPrefilter(function (options, originalOptions, jqXHR) {
			jqXHR.setRequestHeader('Authorization', 'Bearer ' + authData.token);
		});

		// overload the fetch method
		const fetchOverride = window.fetch;
		window.fetch = function (url, args) {
			// Get the parameter in arguments
			if (!args) {
				args = {
					headers: {
						Authorization: 'Bearer ' + authData.token
					}
				};
			} else if (!args.headers) {
				args.headers = {
					Authorization: 'Bearer ' + authData.token
				};
			} else {
				args.headers.Authorization = 'Bearer ' + authData.token;
			}

			// Intercept the parameter here
			return fetchOverride(url, args);
		};

Thank you for your patience and understanding while we work to implement this.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik