如何解决JSViewer跨域使用的问题

登录

报表功能是每个系统当中最重要的且是支柱性的功能模块，所以我们可能会有多个系统都有通用的报表功能，所以系统设计人员往往会将报表抽离出来，形成一个独立的报表服务器供不同系统来调用。

ActiveReports 报表用户，会常常使用 ActiveReports 提供的JSViewer 基于 ASP.NET MVC 开发一个或者是 WebService报表服务器，使用其他的客户端来调用，可在客户端展示报表。客户端可以是任意语言开发的，可以是纯前端项目，也可以是Java Web项目。
接下来我们就看看，如何在客户端调用已开发好的 ActiveReports JSViewer MVC 项目。

1. 将已开发好的 JSViewer 项目部署或者添加（为了测试，我直接使用的是JSViewer MVC 示例）

https://github.com/activereports/WebSamples14/tree/master/JsViewerSamples

2. 修改 JSViewer MVC 的 Web.config 文件在<system.webServer>节点中添加以下内容
注意：Access-Control-Allow-Origin 的是客户端的域名。

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="http://localhost:54629" />
<add name="Access-Control-Allow-Headers" value="Access-Control-Allow-Headers, Origin,Accept,Expires, X-Requested-With,Cache-Control,Content-Type,Pragma,Access-Control-Request-Method, Access-Control-Request-Headers" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>

复制代码

3. 添加了客户端 ASP.NET WEB 空项目

将 JSViewer 需要的js 和css 文件拷贝到项目中

新建一个 HTML 页面，初始化 JSViewer ，并添加 ReportService 的URL.

注意：要输入 ReportService URL:
reportService: {

url: 'http://localhost:58720/api/reporting/',
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>JS Viewer</title>
<link href="jsViewer.min.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
<div style="width: 100%; overflow-x: hidden">
<div style="float:right;width:calc(100% - 200pt)" id="viewerContainer">
</div>
</div>
<script type="text/javascript" src="jsViewer.min.js"></script>
<script type="text/javascript">
let viewer;
function loadViewer() {
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
reportID: 'AcmeStore.rdlx',
<font color="#ff0000"> reportService: {
url: 'http://localhost:58720/api/reporting/',</font>
}
});
}
</script>

复制代码

关于 ReportService 的配置说明：
说明: 指定 Web API URL
类型: 包含 url 和 securityToken 的对象.
示例: reportService: { url: 'http://example.com/api/reporting', securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',};

wengMQ · wengMQ

securityToken是什么秘钥吗？从哪里取值？

KearneyKang · KearneyKang

这是网址的一个安全秘钥

Jerry_981 · Jerry_981

本帖最后由 Jerry_981 于 2021-5-28 18:59 编辑

请帮忙看下，webconfig设置了，跨域还是报错,
<script type="text/javascript">
let viewer;
function loadViewer() {
   viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#viewerContainer',
      reportID: 'RdlReport1.rdlx',
   reportService: {
            url: 'http://localhost:84',
      }
   });
}
  </script>

<httpProtocol>
   <customHeaders>
      <add name="Access-Control-Allow-Origin" value="http://localhost:81" />
      <add name="Access-Control-Allow-Headers" value="Access-Control-Allow-Headers, Origin,Accept,Expires, X-Requested-With,Cache-Control,Content-Type,Pragma,Access-Control-Request-Method, Access-Control-Request-Headers" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
      <add name="Access-Control-Allow-Credentials" value="true" />
   </customHeaders>
</httpProtocol>

Access to fetch at 'http://localhost:84/reports/RdlReport1.rdlx/info' from origin 'http://localhost:81' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Crystal.Li · Crystal.Li

Jerry_981 发表于 2021-5-28 17:25
请帮忙看下，webconfig设置了，跨域还是报错,

let viewer;

您好，您仔细对照一下示例配置。我看您这个reportService地址和示例不一致哦，另外您有问题可以去我们论坛求助中心发帖：https://gcdn.grapecity.com.cn/fo ... mdisplay&fid=41

		自动登录	找回密码
密码			立即注册

[ActiveReports] 如何解决JSViewer跨域使用的问题

本帖子中包含更多资源

4 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄

圣诞拼拼乐