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

Access to XMLHttpRequest at 'http://localhost:59374/api/reports/clients/.../parameters' from origin 'http://localhost:57654' has been blocked by CORS

1 Answer 96 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Wassim
Top achievements
Rank 1
Veteran
Iron
Wassim asked on 05 Feb 2021, 10:46 AM

Hello, 

I have an ASP.NET MVC web application with several modules.

I would like to add a new statistics module contains multiple reports and only use the view part in this application (Telerik MVC HTML5 Report Viewer)

Another solution includes the REST service for report generation and also the definition of reports using the Standalone designer.

 

In the first application, this is my link to myModule in  _Layout.cshtml

 

@Html.ActionLink("Account List", "AccountList", "Home", null, new { @class = "sidebar-link", id = "AccountListSide" })

 

this is the call of my action method in HomeController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace FirstApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult AccountList()
        {
            return View();
        }
    }
}

 

this is my report Viewer: Home/AccountList.cshtml

@using Telerik.Reporting
@using Telerik.ReportViewer.Mvc
@{
    Layout = null;
}
<!DOCTYPE html>
<head>
    <title>Telerik MVC HTML5 Report Viewer</title>
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <script src="~/Scripts/jquery-3.5.1.min.js"></script>
    <link href="~/Content/kendo/2020.3.915/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2020.3.915/kendo.blueopal.min.css" rel="stylesheet" />
 
 
    <style>
        #reportViewer1 {
            position: relative;
            width: 1300px;
            height: 900px;
            font-family: Verdana, Arial;
        }
    </style>
 
    <!--If Kendo is used it should be added before the report viewer.-->
    <script src="@Url.Content("http://localhost:59374/api/reports/resources/js/telerikReportViewer-15.0.21.120.min.js/")"></script>
 
</head>
<body>
 
    @(Html.TelerikReporting().ReportViewer()
 
                                                .Id("reportViewer1")
                                                .ServiceUrl(Url.Content("http://localhost:59374/api/reports"))
                                                .ReportSource(new UriReportSource() { Uri = "ListAccountReport.trdp" })                                         
                                                .ViewMode(ViewMode.Interactive)
                                                .ScaleMode(ScaleMode.Specific)
                                                .Scale(1.0)
                                                .PersistSession(false)
                                                .PrintMode(PrintMode.AutoSelect)
                                                .EnableAccessibility(false)
    )
 
</body>
</html>

 

In my second asp.net mvc application, i created the REST Service ReportController.cs

namespace SecondApp.Controllers
{
    using System.IO;
    using System.Web;
    using Telerik.Reporting.Cache.File;
    using Telerik.Reporting.Services;
    using Telerik.Reporting.Services.WebApi;
 
    //The class name determines the service URL.
    //ReportsController class name defines /api/reports/ service URL.
    public class ReportsController : ReportsControllerBase
    {
        static ReportServiceConfiguration configurationInstance;
 
        static ReportsController()
        {
            //This is the folder that contains the report definitions
            //In this case this is the Reports folder
            var appPath = HttpContext.Current.Server.MapPath("~/");
            var reportsPath = Path.Combine(appPath, "Reports");
 
            //Add resolver for trdx/trdp report definitions,
            //then add resolver for class report definitions as fallback resolver;
            //finally create the resolver and use it in the ReportServiceConfiguration instance.
            var resolver = new UriReportSourceResolver(reportsPath)
                .AddFallbackResolver(new TypeReportSourceResolver());
 
            //Setup the ReportServiceConfiguration
            configurationInstance = new ReportServiceConfiguration
                {
                    HostAppId = "Html5App",
                    Storage = new FileStorage(),
                    ReportSourceResolver = resolver,
                    // ReportSharingTimeout = 0,
                    // ClientSessionTimeout = 15,
                };
        }
 
        public ReportsController()
        {
            //Initialize the service configuration
            this.ReportServiceConfiguration = configurationInstance;
        }
    }
}

 

and under the second solution the Reports directory contains the definition of my report "ListAccountReport.trdp"

Another detail is activate CORS to access the service REST, I add in the 2nd app this snippet of code in web config:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

 

using only one solution, all works fine but separating the two parts in different solutions it throws me this error: 

Unable to get report parameters.

Access to XMLHttpRequest at 'http://localhost:59374/api/reports/clients/6d5ac5243ca/parameters' from origin 'http://localhost:57654' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
jquery-3.5.1.min.js:2 POST http://localhost:59374/api/reports/clients/6d5ac5243ca/parameters net::ERR_FAILED


Thanks for replying


1 Answer, 1 is accepted

Sort by
0
Accepted
Wassim
Top achievements
Rank 1
Veteran
Iron
answered on 08 Feb 2021, 08:57 AM

Well, I solved my own problem..

I created a new project "Telerik Reporting REST Service R1 2021".. updating all packges in my REST Service Solution, install "Microsoft.AspNet.WebApi.Cors", making some changes in my web.config file to enable CORS and by adding 

[EnableCors(origins: "*", headers: "*", methods: "*")] in my ReportController

<handlers>
   <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
   <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
   <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
   <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
   <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
   <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    
 </handlers

 

I added my report definition (ListAccountReport.trdp) under Reports directory.

And from the other application, I made the call to my TelerikReporting().ReportViewer() component.

I refer to this post REST with CORS Settings

Glad to see things are working finally.

Regards,

Tags
General Discussions
Asked by
Wassim
Top achievements
Rank 1
Veteran
Iron
Answers by
Wassim
Top achievements
Rank 1
Veteran
Iron
Share this question
or