SSRS 报告的跨源问题

Question

我正在尝试在我的 Angular 应用程序中实施 ssrs 报告。这是一些代码：模板：

<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. No 'Access-Control-Allow-Origin' header is present on the requested resource. 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

请求header:

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

Answer 1

From jQuery Docs

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

您需要在模板上添加 iframe 而不是使用 .load jQuery 方法，因为 script & css 文件将需要通过SSRS 报表应用程序无法加载到页面文档中。

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

Answer 2

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

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

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

但是，如果您真的想通过 AJAX 加载报告并在当前页面中显示它，设置 Access-Control-Allow-Origin header 是正确的方法。

旁注：出于可测试性原因，访问全局 window object 的首选方式是通过 $window 服务 (see docs)。

SSRS 报告的跨源问题

Cross origin issue with SSRS report

jquery

reporting-services

cors

angularjs

ssrs-2012