Cross-Origin Resource Sharing (CORS)

• May 29, 2019
• 3 minutes to read

On the web, you need to set up cross-origin resource sharing (CORS) on your back-end to configure corresponding permissions to access resources from a server at a different origin.

The Web Dashboard Control uses a JSON contract between server and client. According to Hypertext Transfer Protocol (HTTP/1.1) standard, the Web Dashboard control add the Content-Type: application/json HTTP header for each post request. If you use CORS in your application, you should set ‘Content-Type’ as an allowed header.

Enable CORS for ASP.NET Web Forms and MVC

For ASP.NET Web Forms and MVC, you can configure CORS in the Web.config file.

Simple way

To allow CORS requests from all origins, add the following custom headers:

<configuration>
    <system.webServer> 
        <httpProtocol> 
            <customHeaders> 
                <add name="Access-Control-Allow-Origin" value="*" />  
                <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
            </customHeaders> 
        </httpProtocol> 
    </system.webServer>
</configuration>

Recommended way

Specify the client application’s URL directly to prohibit any client from getting access to your server with personal info. Use the Access-Control-Allow-Origin response header to set it up:

<customHeaders> 
    <add name="Access-Control-Allow-Origin" value="https://example.com" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
</customHeaders> 

In the example above, the policy allows cross-origin requests from https://example.com and no other origins. Change this url to the url where the HTML JavaScript Dashboard is hosted.

You can add the EnableCORS attribute to DashboardController to enable CORS only for DashboardControl.

Enable CORS for ASP.NET Core

Important

The Microsoft.AspNetCore.Cors NuGet package is required for ASP.NET Core Dashboard server.

You can configure CORS in the Startup.cs file.

Simple way

In a ConfigureServices method, use the AllowAnyOrigin method to allow CORS requests from all origins.

public void ConfigureServices(IServiceCollection services) {
    services
        .AddCors(options => {
            options.AddPolicy("AllowAnyOrigin", builder => {
                builder.AllowAnyOrigin();
                builder.WithHeaders("Content-Type");
            });
        });
    // ...
}

In a Configure method, call UseCors before UseMvc and pass the policy name as a parameter:

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    // ...
    app.UseCors("AllowAnyOrigin");
    app.UseMvc(routes => { ... });
}

Recommended way

In a ConfigureServices method, specify the client application’s URL directly to prohibit any client from getting access to your server with personal info. Use the WithOrigins method to set it up:

public void ConfigureServices(IServiceCollection services) {
    services
        .AddCors(options => {
            options.AddPolicy("AllowCORSPolicy", builder => {
                builder.WithOrigins("https://example.com");
                builder.WithHeaders("Content-Type");
            });
        });
    // ...
}

In a Configure method, call UseCors before UseMvc and pass the policy name as a parameter:

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    // ...
    app.UseCors("AllowCORSPolicy");
    app.UseMvc(routes => { ... });
}

In the example above, the policy allows cross-origin requests from https://example.com and no other origins. Change this url to the url where the HTML JavaScript Dashboard is hosted.

You can add the EnableCORS attribute to DashboardController to enable CORS only for DashboardControl.