Angular嵌入Bold Report Viewer时遭遇401 Unauthorized授权错误的排查与解决求助

阿华AIGC实验室

2026-4-2

我在Angular 13项目里嵌入了Bold Report Viewer，加载报表的时候直接撞墙了——弹出授权错误提示，浏览器的网络请求还返回了401 Unauthorized，折腾好久都没搞定，来求助各位大佬！

错误详情

首先是Viewer弹出的提示：

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.

服务器返回的响应内容：

{ "message": "Access Denied: You are not authorized to access this resource. Please verify your credentials or permissions and try again.", "statusCode": 401 }

报表加载的请求详情

我把浏览器里的请求转成了curl命令，参数都是原样带过来的，Token我确实填了，但就是不行：

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":""}}'

我的Angular组件代码

下面是我写的组件代码，看起来配置项都填对了啊：

模板文件（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>';
  }
}

Token的获取方式

我是通过密码模式请求Token的，用的是管理员账号，请求也成功拿到Token了：

curl -X POST http://localhost:8090/reporting/api/site/site1/token \
  -H 'Content-Type: application/json' \
  -d '{ "username": "dummyAdmin.user@example.com", "password": "dummyPassword123!", "grant_type": "password" }'