I am using Bold Report Viewer embedded in an Angular application (Angular 13). When loading a report, I get this error:
A network failure, slow connection, or incorrect service information could be the cause. Please verify your network connection and ensure the ReportServerURL, ReportServerCredential, ReportPath, and Authorization Token, then try again. Kindly check the provided authorization token.
Browser Network call fails with 401 Unauthorized error, here, I am sharing the HTTP POST request as a curl(bash) below:
curl 'http://localhost:8090/reporting/reportservice/api/Viewer/PostReportAction' \
-H 'Accept: application/json, text/javascript, */*; q=0.01' \
-H 'Accept-Language: en-US,en;q=0.9' \
-H 'Cache-Control: no-cache' \
-H 'Connection: keep-alive' \
-H 'Content-Type: application/json; charset=UTF-8' \
-H 'Origin: http://localhost:4400' \
-H 'Pragma: no-cache' \
-H 'Referer: http://localhost:4400/' \
-H 'Sec-Fetch-Dest: empty' \
-H 'Sec-Fetch-Mode: cors' \
-H 'Sec-Fetch-Site: same-site' \
-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36' \
-H 'sec-ch-ua: "Google Chrome";v="141", "Not?A_Brand";v="8", "Chromium";v="141"' \
-H 'sec-ch-ua-mobile: ?0' \
-H 'sec-ch-ua-platform: "Windows"' \
-H 'serverUrl: http://localhost:8090/reporting/api/site/site1' \
-H 'serviceAuthorizationToken: Bearer <TOKEN WAS GIVEN HERE>' \
--data-raw '{"reportAction":"ReportLoad","isReloadReport":false,"controlId":"reportViewer_Control","reportPath":"/Sample Reports/Sales Order Detail","enableVirtualEvaluation":false,"smartRendering":false,"reportServerUrl":"http://localhost:8090/reporting/api/site/site1","processingMode":"remote","locale":"en-US","enableSearchText":false,"accessInternalValue":false,"customBrandSettings":{"hideHelpLink":false,"customDomain":"https://help.boldreports.com","customBrandName":"Bold Reports","customLinks":[{"name":"ESLicenseMessage","url":"/licensing/license-token/"}]},"extendedAttributes":{},"localeSettings":{"dateFormat":"","timeFormat":"","timeZone":""}}'
The response body from the report server API contains:
{
"message": "Access Denied: You are not authorized to access this resource. Please verify your credentials or permissions and try again.",
"statusCode": 401
}
Angular Component:
// report-viewer.component.html
<bold-reportviewer
id="reportViewer_Control"
[reportServiceUrl]="reportViewerServiceUrl"
[reportServerUrl]="reportViewerServerUrl"
[serviceAuthorizationToken]="serverServiceAuthorizationToken"
[reportPath]="reportViewerReportPath"
style="width: 100%; height: 950px">
</bold-reportviewer>
// report-viewer.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-report-viewer',
templateUrl: './report-viewer.component.html',
styleUrls: ['./report-viewer.component.css']
})
export class ReportViewerComponent {
reportViewerServiceUrl: string;
reportViewerServerUrl: string;
reportViewerReportPath: string;
serverServiceAuthorizationToken: string;
constructor() {
this.reportViewerServiceUrl = 'http://localhost:8090/reporting/reportservice/api/Viewer';
this.reportViewerServerUrl = 'http://localhost:8090/reporting/api/site/site1';
this.reportViewerReportPath = '/Sample Reports/Sales Order Detail';
this.serverServiceAuthorizationToken = 'Bearer <TOKEN was given here>';
}
}
I received the token by the following request.
curl -X POST http://localhost:8090/reporting/api/site/site1/token \
-H 'Content-Type: application/json' \
-d '{
"username": "[email protected]",
"password": "dummyPassword123!",
"grant_type": "password"
}'
serverServiceAuthorizationToken generation
Docker container is running on port http://localhost:8090
Bold Report Admin user
Bold Report Admin user proof
How to resolve this issue and need to understand what went wrong?
I am following these two resources:
Tried to view the report using JavaScript approach:
