使用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>

复制代码

多个网址访问

<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>

复制代码

如果是（core项目）

1、在ConfigureServices添加如下代码,根据自己需求二选一

a、所有Localhost网址可以访问

// localhost 访问；
services.AddCors(options =>
{
options.AddPolicy("AllowAll", builder =>
{
builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost")
.AllowCredentials()
.AllowAnyMethod()
.AllowAnyHeader();
});
});

复制代码

b、任何网址可以访问

// 任何网址访问；
services.AddCors(options =>
{
options.AddPolicy("AllowAll", builder =>
{
builder.SetIsOriginAllowed(_ => true)
.AllowCredentials()
.AllowAnyMethod()
.AllowAnyHeader();
});
});

复制代码

c、固定对应的网址访问

services.AddCors(options =>
{
options.AddPolicy("AllowAll", policy =>
{
// 设定允许跨域的来源，有多个可以用','隔开
policy.WithOrigins("http://localhost:59032", "http://localhost:24661")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});

复制代码

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 · zhaona

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

KearneyKang · KearneyKang

放在服务器项目中

LoveBaby · LoveBaby

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

KearneyKang · KearneyKang

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

LoveBaby · LoveBaby

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

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

KearneyKang · KearneyKang

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

LoveBaby · LoveBaby

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

LoveBaby · LoveBaby

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

KearneyKang · KearneyKang

非常感谢分享

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

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

本帖子中包含更多资源

11 个回复

圣诞拼拼乐

微信认证勋章

讲师达人

悬赏达人

元老葡萄