如何解决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>
<!-- IIS Virtual Directory name -->
<!--<base href="/JSViewer_MVC/">-->
<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',};
securityToken是什么秘钥吗？从哪里取值？
这是网址的一个安全秘钥 本帖最后由 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.
Jerry_981 发表于 2021-5-28 17:25
请帮忙看下，webconfig设置了，跨域还是报错,
let viewer;
您好，您仔细对照一下示例配置。我看您这个reportService地址和示例不一致哦，另外您有问题可以去我们论坛求助中心发帖：https://gcdn.grapecity.com.cn/forum.php?mod=forumdisplay&fid=41
页:
[1]