c# - SignalR "Access to XMLHttpRequest ..." error in ASP.NET MVC

Question

I use SignalR (Microsoft.AspNet.SignalR.SystemWeb v2.4.0 and Microsoft.AspNet.SignalR.Core v2.4.1.0) in an ASP.NET MVC application and when debugging, I encounter "Access to XMLHttpRequest at 'https://demo.com/signalr/negotiate?clientProtocol=2.1&connectionData=%5B%7B%22name%22%3A%22demohub%22%7D%5D&_=1569323349167' from origin 'http://localhost:20700' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." error. By looking on the web, I have concluded some configurations on Startup.cs as shown below, but I cannot use this configuration as I do not user ASP.NET Core (I use ASP.NET MVC). Any idea?

public void ConfigureServices(IServiceCollection services)
{
services.addc .AddCors(options =>
{
    options.AddPolicy(_corsPolicyName,
    builder =>
    {
        builder.WithOrigins(
                "https://localhost:5001",
                "https://localhost:4001",
                "https://localhost:44307",
                "https://localhost:44394"
            )
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});

services.AddSignalR();
}

Update: Here is my configuration to fix the problem:

Startup.cs:

using Microsoft.Extensions.DependencyInjection;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(Demo.Web.UI.App_Start.Startup))]
namespace Demo.Web.UI.App_Start
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

web.config:

<system.webServer>

    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="http://localhost:20700"/>
            <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS"/>
            <add name="Access-Control-Allow-Headers" value="Content-Type"/>
        </customHeaders>
    </httpProtocol>    

</system.webServer>

Answer 1

I've managed to make it work, i've published the source on on GitHub https://github.com/jonathanlarouche/stackoverflow_q58027442

Prerequisites packages are : Asp.Net Web Application with the following Nuget packages :
Microsoft.AspNet.SignalR.Core 2.4.1
Microsoft.AspNet.SignalR.JS 2.4.1
Microsoft.AspNet.SignalR.SystemWeb 2.4.0
Microsoft.Owin.Security 2.1.0
Microsoft.Owin 4.0.0

web.config <system.webServer> node.
IMPORTANT Access-Control-Allow-Credentials Is required when using Allow-Origin

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:20700" />
        <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Credentials" value="true"/>
      </customHeaders>
    </httpProtocol>
</system.webServer>

Startup.cs Configuration file

public class Startup
{

    public void Configuration(IAppBuilder app)
    {
        app.MapSignalR();
    }
}

In the Git solution, I've configured my Application to run under port 49611, then i've published the Html page to a empty website running under port 20700. SignalR requests now pass on port 49611 and CORS are working.

SignalR Client Html: (Working when running from http://localhost:20700/ or http://localhost:49611/)

<script type="text/javascript" src="/Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.signalR-2.4.1.min.js"></script>
<script type="text/javascript" src="http://localhost:49611/SignalR/hubs"></script>
<script type="text/javascript">
    ...
    var ChatProxy;
    function Connect() {
        ChatServerUrl = "http://localhost:49611/";
        var ChatUrl = ChatServerUrl + "signalr";
        //This will hold the connection to the signalr hub   
        SignalrConnection = $.hubConnection(ChatUrl, {
            useDefaultPath: false
        });
        ChatProxy = SignalrConnection.createHubProxy('ChatHub');
    }
    ...
</script>

Download the Repo and try it