首页 › 专题教程 › 使用JSviewer独立部署一个报表服务，如何解决跨域的问题

KearneyKang 发表于 2020-7-10 15:19:34

使用JSviewer独立部署一个报表服务，如何解决跨域的问题

本帖最后由 KearneyKang 于 2022-4-7 18:34 编辑

报表功能是每个系统当中最重要的且是支柱性的功能模块，业务人员使用报表来进行数据统计和分析，并且多个系统会存在报表复用的情况，因此报表模块经常会被抽离出来做一个独立的报表服务，供其他系统进行报表的调用，不仅如此还解决了ActiveReports跨平台使用的问题，把报表模块部署为一个独立的报表服务之后，其他框架下的系统也可以进行报表的调用。可以是纯前端项目，也可以是Java Web项目等等。

接下来我们就看看，如何在客户端调用已开发好的 ActiveReportsJSViewer MVC 项目。
将已开发好的 JSViewer 项目部署或者添加（为了测试，我直接使用的是JSViewer MVC 示例）
https://github.com/activereports/WebSamples14/tree/master/JsViewerSamples/JSViewer_MVC（.NetFrameWork项目）
https://github.com/activereports/WebSamples14/tree/master/JsViewerSamples/JSViewer_MVC(Core)（Core项目）如果是（.NetFrameWork项目）
1、 修改 JSViewer MVC 的 Web.config 文件在<system.webServer>节点中添加以下内容注意：对应的网址要匹配一个网址访问 <system.webServer>
                <handlers>
                        <add name="nostaticfile" path="*" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
                </handlers>
                <security>
                        <requestFiltering allowDoubleEscaping="true" />
                </security>
                <httpProtocol>
                        <customHeaders>
                              <add name="Access-Control-Allow-Origin" value="http://localhost:44365"/><!--允许访问的报表服务-->
                              <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>
      </system.webServer>
多个网址访问<font face="微软雅黑"><rewrite>
      <outboundRules>
      <rule name="AddCrossDomain">
          <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
            <add input="{HTTP_ORIGIN}" pattern="http://localhost:59032|http://10.32.1.251:6060" />
          </conditions>
          <action type="Rewrite" value="{C:0}" />
      </rule>
      </outboundRules>
    </rewrite>
    <httpProtocol>
      <customHeaders>
      <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>

</font>如果是（core项目）
1、在ConfigureServices添加如下代码,根据自己需求二选一
a、所有Localhost网址可以访问<font face="微软雅黑">// localhost 访问；
            services.AddCors(options =>
            {
                options.AddPolicy("AllowAll", builder =>
                {
builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost")
                  .AllowCredentials()
                  .AllowAnyMethod()
                  .AllowAnyHeader();
                });
            });</font>b、任何网址可以访问<font face="微软雅黑">// 任何网址 访问；
            services.AddCors(options =>
            {
                options.AddPolicy("AllowAll", builder =>
                {
                  builder.SetIsOriginAllowed(_ => true)
                  .AllowCredentials()
                  .AllowAnyMethod()
                  .AllowAnyHeader();
                });
            });</font>c、固定对应的网址访问<font face="微软雅黑"> services.AddCors(options =>
            {
                options.AddPolicy("AllowAll", policy =>
                {
                  // 设定允许跨域的来源，有多个可以用','隔开
                  policy.WithOrigins("http://localhost:59032", "http://localhost:24661")
                  .AllowAnyHeader()
                  .AllowAnyMethod()
                  .AllowCredentials();
                });
            });</font>
2、在Configure进行修改 添加： app.UseCors("AllowAll");

跨平台调用报表服务添加了客户端 ASP.NET WEB 空项目
[*]将 JSViewer 需要的js 和css 文件拷贝到项目中

新建一个 HTML 页面，初始化 JSViewer ，并添加 ReportService 的URL.
注意：要输入 ReportService URL:
reportService: {
url: 'http://localhost:58720/api/reporting/',
}关于 ReportService 的配置说明：说明: 指定 Web API URL
类型: 包含 url 和 securityToken 的对象.
示例: reportService: {    url: 'http://example.com/api/reporting',    securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',};

demo实例下载(.Net版本)

zhaona 发表于 2020-9-24 19:06:23

报表AcmeStore.rdlx是放在本地项目还是在服务项目里呢？

KearneyKang 发表于 2020-9-27 12:25:07

放在服务器项目中

LoveBaby 发表于 2020-12-15 08:38:15

:handshake请教一下，securityToken是啥？菜鸟新来的，谢指教哈。

KearneyKang 发表于 2020-12-16 12:30:31

你好，这是一个认证，跟Token认证一样

LoveBaby 发表于 2020-12-16 13:36:09

KearneyKang 发表于 2020-12-16 12:30
你好，这是一个认证，跟Token认证一样

感谢，那请问一下，这个认证哪边有文档？可以借鉴一下，谢谢。

KearneyKang 发表于 2020-12-18 09:43:29

你好，这个就是你 进行网站访问的时候，如果需要一个认证的话，就使用它，为了安全性 。如果不需要这个是可以直接移除掉的，就是一个Token安全认证

LoveBaby 发表于 2021-1-5 11:25:30

反馈一个bug，使用此方式部署，在JSViewer里面导出文件时，扩展名有问题，比如上述示例中报表导出pdf，不会是AcmeStore.pdf文件，而是直接存为AcmeStore.rdlx的pdf文件。:(

LoveBaby 发表于 2021-1-5 13:03:22

经测试，以WebDesigner_MVC为例，使用如下方式解决跨域Header问题。
protected void Application_BeginRequest(object sender, EventArgs e)
      {
            ......
            HttpContext.Current.Response.AddHeader("Access-Control-Expose-Headers", "Content-Disposition");
            ......
      }

KearneyKang 发表于 2021-1-14 16:27:30

非常感谢分享:)

查看完整版本: 使用JSviewer独立部署一个报表服务，如何解决跨域的问题