Lenka.Guo 发表于 2020-5-12 14:48:35

如何解决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',};





wengMQ 发表于 2020-7-4 20:35:18

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

KearneyKang 发表于 2020-7-6 17:38:04

这是网址的一个安全秘钥

Jerry_981 发表于 2021-5-28 17:25:53

本帖最后由 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 发表于 2021-5-31 10:32:42

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

    let viewer;


您好,您仔细对照一下示例配置。我看您这个reportService地址和示例不一致哦,另外您有问题可以去我们论坛求助中心发帖:https://gcdn.grapecity.com.cn/forum.php?mod=forumdisplay&fid=41
页: [1]
查看完整版本: 如何解决JSViewer跨域使用的问题