s-s-rS 报告的跨源问题

Posted 2023-03-04

【中文标题】s-s-rS 报告的跨源问题

【英文标题】：Cross origin issue with s-s-rS report

【发布时间】：2016-06-11 00:13:16

【问题描述】：

我正在尝试在我的 Angular 应用程序中实现一个 s-s-rs 报告。这是一些代码： 模板：

<div panel-charts style="width:100%:height:100%"                         
</div>

指令：

a.directive('panelCharts', function () 
return 
    link: function (scope, elem, attrs) 
         $(elem).load('http://localhost/Reportserver?/casechart&Title=abc');
    
   
);

我的应用程序根是 localhost:7063。

我得到以下信息： XMLHttpRequest 无法加载 http://localhost/Reportserver?/casechart&Title=abc。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:7063' 不允许访问。响应的 HTTP 状态代码为 401。

我了解我的问题在于 CORS。我已将此添加到我的 web.config：

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

这没有帮助。但是我有一个按钮，当我点击它时会触发以下内容：

<button type="button" style="width:auto;" ng-click="runReport()">
      Test
</button>

这在控制器中：

$scope.runReport = function () 
 var win = window.open('http://localhost/Reportserver?/casechart&Title=abc', '_blank');

然后就可以了。

知道如何在不点击按钮的情况下使其工作吗？

谢谢

编辑 1。 要求：

Request      URL:http://localhost/Reportserver?/casechart&Title=abc
Request Method:GET
Status Code:401 Unauthorized
Remote Address:10.229.232.73:80

请求头：

Accept:text/html, */*; q=0.01
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:localhost
Origin:http://localhost:7063
Referer:http://localhost:7063/Main.aspx
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,     like Gecko) Chrome/48.0.2564.109 Safari/537.36

【参考方案1】：

来自jQuery Docs

由于浏览器安全限制，大多数“Ajax”请求都受制于 同源政策；请求无法成功检索 来自不同域、子域、端口或协议的数据。

您需要在模板上添加iframe 而不是使用.load jQuery 方法，因为script 和css 文件将不会被s-s-rS 报告应用程序需要加载到页面文档中。

element.append('<iframe src="http://localhost/Reportserver?/casechart&Title=abc"  ></iframe>')

【参考方案2】：

如果您只想在新窗口中打开报告，您可以在指令中调用window.open：

a.directive('panelCharts', function () 
  return 
    link: function (scope, elem, attrs) 
      window.open('http://localhost/Reportserver?/casechart&Title=abc');
    
  
);

CORS 仅适用于 AJAX 请求，例如 jQuery 的 .load，它在当前页面内异步执行请求。

但是，如果您确实想通过 AJAX 加载报表并将其显示在当前页面中，则设置 Access-Control-Allow-Origin 标头是正确的方法。

附带说明：出于可测试性原因，访问全局 window 对象的首选方式是通过 $window 服务 (see docs)。

【讨论】：

此代码将在当前选项卡中打开指定的 URL 内容。这不是 OP 想要实现的。

如果标题确实存在，您是否检查了浏览器开发工具？您可以在此处找到不同服务器的设置说明：enable-cors.org/server.html

关键部分是响应头（example）。

好吧，我不是在控制反应。它是一个 s-s-rS 报表服务器，用于返回报表。