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

报表功能是每个系统当中最重要的且是支柱性的功能模块，业务人员使用报表来进行数据统计和分析，并且多个系统会存在报表复用的情况，因此报表模块经常会被抽离出来做一个独立的报表服务，供其他系统进行报表的调用，不仅如此还解决了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>节点中添加以下内容

注意：对应的网址要匹配

一个网址访问

1. <system.webServer>
   
2.                 <handlers>
   
3.                         <add name="nostaticfile" path="*" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
   
4.                 </handlers>
   
5.                 <security>
   
6.                         <requestFiltering allowDoubleEscaping="true" />
   
7.                 </security>
   
8.                 <httpProtocol>
   
9.                         <customHeaders>
   
10.                                 <add name="Access-Control-Allow-Origin" value="http://localhost:44365"/>  <!--允许访问的报表服务-->
    
11.                                 <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" />
    
12.                                 <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
    
13.                                 <add name="Access-Control-Allow-Credentials" value="true" />
    
14.                         </customHeaders>
    
15.                 </httpProtocol>
    
16.         </system.webServer>

复制代码

多个网址访问

1. <font face="微软雅黑"><rewrite>
   
2.       <outboundRules>
   
3.         <rule name="AddCrossDomain">
   
4.           <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
   
5.           <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
   
6.             <add input="{HTTP_ORIGIN}" pattern="http://localhost:59032|http://10.32.1.251:6060" />
   
7.           </conditions>
   
8.           <action type="Rewrite" value="{C:0}" />
   
9.         </rule>
   
10.       </outboundRules>
    
11.     </rewrite>
    
12.     <httpProtocol>
    
13.       <customHeaders>
    
14.         <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" />
    
15.         <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
    
16.         <add name="Access-Control-Allow-Credentials" value="true" />
    
17.       </customHeaders>
    
18. </httpProtocol>
    
19. 
    
20. </font>

复制代码

如果是（core项目）

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

a、所有Localhost网址可以访问

1. <font face="微软雅黑">// localhost 访问；
   
2.             services.AddCors(options =>
   
3.             {
   
4.                 options.AddPolicy("AllowAll", builder =>
   
5.                 {
   
6. builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost")
   
7.                     .AllowCredentials()
   
8.                     .AllowAnyMethod()
   
9.                     .AllowAnyHeader();
   
10.                 });
    
11.             });</font>

复制代码

b、任何网址可以访问

1. <font face="微软雅黑">// 任何网址 访问；
   
2.             services.AddCors(options =>
   
3.             {
   
4.                 options.AddPolicy("AllowAll", builder =>
   
5.                 {
   
6.                     builder.SetIsOriginAllowed(_ => true)
   
7.                     .AllowCredentials()
   
8.                     .AllowAnyMethod()
   
9.                     .AllowAnyHeader();
   
10.                 });
    
11.             });</font>

复制代码

c、固定对应的网址访问

1. <font face="微软雅黑"> services.AddCors(options =>
   
2.             {
   
3.                 options.AddPolicy("AllowAll", policy =>
   
4.                 {
   
5.                     // 设定允许跨域的来源，有多个可以用','隔开
   
6.                     policy.WithOrigins("http://localhost:59032", "http://localhost:24661")
   
7.                     .AllowAnyHeader()
   
8.                     .AllowAnyMethod()
   
9.                     .AllowCredentials();
   
10.                 });
    
11.             });</font>

复制代码

2、在Configure进行修改

添加： app.UseCors("AllowAll");

跨平台调用报表服务

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

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

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

注意：要输入 ReportService URL:

1. reportService: {
   
2. url: 'http://localhost:58720/api/reporting/',
   
3. }

复制代码

关于 ReportService 的配置说明：

说明: 指定 Web API URL
类型: 包含 url 和 securityToken 的对象.
示例:

1. reportService: {    url: 'http://example.com/api/reporting',    securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',};
   

复制代码

demo实例下载(.Net版本)

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

放在服务器项目中

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

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

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

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

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

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

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

非常感谢分享