图片跨域问题而无法导出Excel或PDF之解决方法

ActiveReportsJS 提供了图片控件，可以在报表中设计显示图文混排的报表模板，而经常我们也需要将电子签名等信息展示在报表中，也尝尝作为图片格式的引用而加载。图片来源可以为 外部的URL， 报表内嵌的图像，数据字段的二进制图片信息。而很多时候我们会引用图片来自于外部的URL，有可能与当前报表服务器是不同域名的服务。大家就会很困惑图片可以在报表中正常展示，但是在导出时就无法显示。
打开浏览器控制台，就会发现，提示以下错误信息：

1. Access to XMLHttpRequest at 'http://localhost:8000/001.png' from origin 'http://192.168.3.39:8060' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

复制代码

很明显是请求图片时，图片的跨域引起的错误，导致报表无法将HTML 导出为PDF 或Excel文件，因此无法成功导出。
解决方法，自然就是在图片的服务端配置允许跨域，允许外部请求请求图片。
图片的服务端，可以配置以下信息：

1. <?xml version="1.0" encoding="UTF-8"?>
   
2. <configuration>
   
3.     <system.webServer>
   
4.         <staticContent>
   
5.             <mimeMap fileExtension=".rdlx-json" mimeType="application/json" />
   
6.         </staticContent>
   
7.         <httpProtocol>
   
8.             <customHeaders>
   
9.                 <add name="Access-Control-Allow-Headers" value="Content-Type, api_key, Authorization" />
   
10.                 <add name="Access-Control-Allow-Origin" value="*" />
    
11.                 <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
    
12.             </customHeaders>
    
13.         </httpProtocol>
    
14.     </system.webServer>
    
15. </configuration>
    

复制代码

以IIS 部署网站为例，图片网站，切换到【功能视图】选择HTTP请求头










配置完成后重启图片服务端。


在进入报表客户端，强制刷新浏览器，重新进入报表加载页面：



如果有人反馈配置了允许跨域，但仍有问题，那就请检查跨域是否在图片端配置，而不是报表服务端，以及配置的属性是否正常。

如果还是有问题，建议将图片改为报表内嵌图像资源，或者二进制。