1

I am trying to implement a ssrs report into my Angular application. Here is some code: Template:

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

Directive:

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

My application root is localhost:7063.

I am getting the following: XMLHttpRequest cannot load http://localhost/Reportserver?/casechart&Title=abc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7063' is therefore not allowed access. The response had HTTP status code 401.

I understand that my problem is with CORS. I have added this to my web.config:

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

That did not help. But I I have a button that fires the following when I click on it:

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

And this in controller:

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

then it works.

Any idea how to make it work without clicking on a button?

Thanks

Edit 1. Request:

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

request 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
BIReportGuy
  • 799
  • 3
  • 13
  • 36
Mark
  • 4,535
  • 7
  • 39
  • 76

2 Answers2

3

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.

You need to add iframe on template instead of using .load jQuery method, because script & css file which are going to need by SSRS report application would not get loaded onto page document.

element.append('<iframe src="http://localhost/Reportserver?/casechart&Title=abc" width="500px" height="500px"></iframe>')
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
1

If you just want to open the report in a new window, you can just call window.open in your directive:

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

CORS only applies for AJAX-requests, like jQuery's .load, which perform the request asynchronously within the current page.

However, if you actually want to load the report via AJAX and display it within the current page, setting the Access-Control-Allow-Origin header is the right way to go.

On a side note: For testability reasons the preferred way to access the global window object is through the $window service (see docs).

Christian Zosel
  • 1,424
  • 1
  • 9
  • 16