This is a migrated thread and some comments may be shown as answers.

Html5 Report Viewer as a separate application from report service

11 Answers 654 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Salini
Top achievements
Rank 1
Salini asked on 19 Dec 2016, 08:50 AM

Hi,

I have created a telerik reporting rest service application using visual studio template and created a report as in the sample 'C:\Program Files (x86)\Telerik\Reporting R3 2016\Examples\CSharp\Html5Demo'. The report is loaded successfully.

But my front end is a separate application. So I have created a new project and added the 'index.html' and 'ReportViewer' folder into that and the 'serviceUrl' in index.html is updated as 'serviceUrl: "http://localhost:12345//api/reports/" '. I got CORS errors initially and resolved by adding custom header as 

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

<add name="Access-Control-Allow-Headers" value="*" />

<add name="Access-Control-Allow-Methods" value="*" /> in the report service(http://localhost:12345) web config.

But still, I am getting some error like

cannot load http://localhost:12345/api/reports/clients/141336-2297/parameters. Response for preflight has invalid HTTP status code 405

cannot load http://localhost:12345/api/reports/clients/141336-2297/instances. Response for preflight has invalid HTTP status code 405

even though my http://localhost:12345 is up.

Is there any solution for this.

Can I load the report viewer as a separate application from the report service?

My actual requirement is to load the report viewer in an AngularJS2 application. Since there is no AngularJS2 report viewer is available, I tried it to use in an independent JQuery application and later I can move the same to angular.

 

 

 

 

11 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 19 Dec 2016, 12:41 PM
Hello Salini,

The Reporting RESt service is a WabAPi based controller and you can enable CORS in its project - Enabling Cross-Origin Requests in ASP.NET Web API 2.


I hope this helps.

Regards,
Stef
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Salini
Top achievements
Rank 1
answered on 19 Dec 2016, 01:27 PM

Hi,

The Telerik Rest Service template project that i have created using visual studio template is in .net framework 4 and the CORS already enabled by the web config explained above. But still the same issue is coming.

 

0
Stef
Telerik team
answered on 20 Dec 2016, 02:00 PM
Hello Salini,

Please compare your settings to these of the attached solution:
  1. OldWebApplication - WebForms2.aspx has the HTML5 Viewer;
  2. NewWebApplication-Controllers-ReportsController.cs has the Reporting REST service with enabled CORS (see Global.asax.cs and ReportsController.cs);


If you need further help, you can open a support ticket to send us a demo project that reproduces the problem.

Regards,
Stef
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jesus
Top achievements
Rank 1
answered on 26 Jan 2018, 11:14 PM

I have been trying to implement in separated projects UI APP and WebAPI (2) APP, but when a sent the request I get this error
Failed to load
http://localhost:3041/api/reports/resources/templates/telerikReportViewerTemplate-html:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3023' is therefore not allowed
access.

 

When I type http://localhost:3041/api/reports/formats, y get a correct JSON format, as in telerik docs is displayed.
I already set and enable CORS for the web api, but it doesn't work. Hopefully you can help me

0
Todor
Telerik team
answered on 31 Jan 2018, 11:13 AM
Hi Jesus,

The REST Service is working since you can successfully request the JSON with export formats.

You would receive the specified error in the Browser console when there is no CORS enabled.
I have attached a short video demonstrating how to enable CORS for the REST Service. The video is silent, in .swf format that could be played in a Browser with installed Flash plugin.

Regards,
Todor
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kevin
Top achievements
Rank 1
answered on 04 May 2018, 04:39 AM
I realize this is an old post, but I wanted to give Kudos to Todor.  I was struggling to understand where / how to apply CORS in my application.  The video really helped.  So, thanks!
0
Saima
Top achievements
Rank 1
answered on 05 Jul 2018, 11:42 AM

I have seen the video and apply soln in same way but still has the same error No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

 

Please help

0
Saima
Top achievements
Rank 1
answered on 05 Jul 2018, 12:33 PM
How can i upload my zip file of size 52 mb. for reference with this post?
0
Todor
Telerik team
answered on 10 Jul 2018, 09:09 AM
Hello Saima,

The video is specific for creating a separate Telerik Reporting REST Service with enabled CORS. The steps provided there are sufficient to create an application with separate REST Service and separate client with Html5 Report Viewer.

More general approaches for enabling CORS are available on the Internet. For example for ASP.NET Web API check ASP.NET Web API - CORS Support in ASP.NET Web API 2 MSDN article.

Zip files of up to 40MB can be attached only to a Support Ticket.
If really necessary, larger files can be sent through our FTP Server Portal (special conditions apply).

Regards,
Todor
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Saima Gul
Top achievements
Rank 1
answered on 11 Jul 2018, 06:00 AM
My problem has been solved. Thanks
0
Karthic
Top achievements
Rank 1
Veteran
answered on 27 Apr 2020, 06:21 PM
How you handle this issue, kindly explain
Tags
General Discussions
Asked by
Salini
Top achievements
Rank 1
Answers by
Stef
Telerik team
Salini
Top achievements
Rank 1
Jesus
Top achievements
Rank 1
Todor
Telerik team
Kevin
Top achievements
Rank 1
Saima
Top achievements
Rank 1
Saima Gul
Top achievements
Rank 1
Karthic
Top achievements
Rank 1
Veteran
Share this question
or