Html5 Report Viewer as a separate application from report service

11 posts, 0 answers
  1. Salini
    Salini avatar
    4 posts
    Member since:
    Feb 2012

    Posted 19 Dec 2016 Link to this post

    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.

     

     

     

     

  2. Stef
    Admin
    Stef avatar
    3610 posts

    Posted 19 Dec 2016 Link to this post

    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
  3. Salini
    Salini avatar
    4 posts
    Member since:
    Feb 2012

    Posted 19 Dec 2016 in reply to Stef Link to this post

    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.

     

  4. Stef
    Admin
    Stef avatar
    3610 posts

    Posted 20 Dec 2016 Link to this post

    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
  5. Jesus
    Jesus avatar
    2 posts
    Member since:
    Nov 2015

    Posted 26 Jan Link to this post

    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

  6. Todor
    Admin
    Todor avatar
    191 posts

    Posted 31 Jan Link to this post

    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
  7. Kevin
    Kevin avatar
    1 posts
    Member since:
    May 2018

    Posted 03 May in reply to Todor Link to this post

    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!
  8. Saima
    Saima avatar
    9 posts
    Member since:
    Apr 2014

    Posted 05 Jul in reply to Kevin Link to this post

    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

  9. Saima
    Saima avatar
    9 posts
    Member since:
    Apr 2014

    Posted 05 Jul in reply to Saima Link to this post

    How can i upload my zip file of size 52 mb. for reference with this post?
  10. Todor
    Admin
    Todor avatar
    191 posts

    Posted 10 Jul Link to this post

    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
  11. Saima Gul
    Saima Gul avatar
    37 posts
    Member since:
    Mar 2010

    Posted 11 Jul in reply to Todor Link to this post

    My problem has been solved. Thanks
Back to Top