# JSViewer CORS

This topic demonstrates the use of the ActiveReports JSViewer with CORS.

## Content

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.

![Screenshot 2025-06-13 130847](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/Screenshot%202025-06-13%20130847.11817e.png?width=1235)

> type=note
> Note: To run each application in this sample, you must have:
>
> * [Visual Studio 2017](https://visualstudio.microsoft.com/vs/) (version 17.0 or later)
> * [.NET Framework Dev Pack](https://dotnet.microsoft.com/en-us/download) (version 4.7.2 or later)

### Sample Location

[https://github.com/activereports/WebSamples19/tree/main/JSViewer_CORS](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.