JSViewer CORS

The JSViewer_CORS sample demonstrates using the ActiveReports JSViewer when the server is hosted elsewhere. The sample consists of two applications - client and server, to demonstrate using the CORS (Cross-origin resource sharing) where

• a client requests resources (reports) from one server and

• the server sends a response back to the client.

type=note

Note: To run each application in this sample, you must have:

• Visual Studio 2017 (version 17.0 or later)

• .NET Framework Dev Pack (version 4.7.2 or later)

Sample Location

https://github.com/activereports/WebSamples19/tree/main/JSViewer_CORS

Details

First, you need to build both applications and then run the Server application followed by the Client application.

type=note

Note: The client url is specified in the web.config as the value of the custom header "Access-Control-Allow-Origin".

When you run the applications, you will see that the client application displays the JSViewer on the browser with a list of reports. Clicking the report link in the left panel opens the report for preview. You can preview the following reports.

• AcmeStore.rdlx

• AnnualReport.rdlx

• Invoice.rdlx

• Invoice.rpx

• Invoice_Colored.rpx

• InvoiceList.rdlx

• Project & Resource Analysis - Staff Performance Analysis.rdlx

• Statistical analysis scatter plot.rdlx

• User defined report columns.rdlx

The Server application consists of the following elements.

• Controllers folder: This folder contains the HomeController that handles the user interaction and returns the main Index view.

• Global.asax: The default class that sets global URL routing values for this web application.

• packages.config

• Startup.cs: The startup file adds the UseReportViewer() middleware to configure the middleware for ActiveReports API and handlers.

• Web.config: This configuration file contains the necessary markup for CORS to work and the actual client url.