I’m facing a CORS (Cross-Origin Resource Sharing) issue while trying to integrate SignalR with Angular 10 and a .NET Framework 4.6.1 project. I’ve followed the typical setup steps but seem to be encountering CORS-related errors.

In my .NET project, I have to implement a SignalR hub (ChatHub) with the following configuration:

    [EnableCors(origins: "*", headers: "*", methods: "*")]
[HubName("Chat")]
public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}

Additionally, I’ve set up the OWIN startup class (Startup.cs) as follows:

using Microsoft.Owin;
using Microsoft.Owin.Cors;
using Owin;
using System;
using System.Threading.Tasks;

[assembly: OwinStartup(typeof(YourNamespace.Startup))]

namespace YourNamespace
{
    public class Startup
    {
        private static readonly Lazy<CorsOptions> SignalrCorsOptions = new Lazy<CorsOptions>(() =>
        {
            return new CorsOptions
            {
                PolicyProvider = new CorsPolicyProvider
                {
                    PolicyResolver = context =>
                    {
                        var policy = new CorsPolicy();
                        policy.AllowAnyOrigin = true;
                        policy.AllowAnyMethod = true;
                        policy.AllowAnyHeader = true;
                        policy.SupportsCredentials = false;
                        return Task.FromResult(policy);
                    }
                }
            };
        });

        public void Configuration(IAppBuilder app)
        {
            app.Map("/signalr", map =>
            {
                map.UseCors(SignalrCorsOptions.Value);
                map.RunSignalR(new HubConfiguration());
            });

            GlobalConfiguration.Configure(WebApiConfig.Register);
        }
    }
}

On the Angular side, I’m using the @microsoft/signalr package. Here’s a snippet from my Angular service:

import * as signalR from '@microsoft/signalr';

@Injectable({
  providedIn: 'root'
})
export class SignalRService {
  private hubConnection: signalR.HubConnection;

  constructor() {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('https://localhost:44300/signalr/chat')
      .build();

    this.hubConnection.start()
      .then(() => console.log('SignalR connection started.'))
      .catch(err => console.error('Error while starting SignalR connection: ' + err));
  }

  public sendMessage(name: string, message: string): void {
    this.hubConnection.invoke('Send', name, message)
      .catch(err => console.error('Error while sending message: ' + err));
  }

  public receiveMessage(callback: (name: string, message: string) => void): void {
    this.hubConnection.on('broadcastMessage', callback);
  }
}

Despite these configurations, I’m consistently encountering the following CORS error:

Access to fetch at 'http://localhost:44300/signalr/chat/negotiate?negotiateVersion=1' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I suspect that I might not be using the SignalR path (http://localhost:44300/signalr/chat) correctly or missing some crucial configuration. Can someone please guide me on resolving this CORS issue? Any insights or suggestions would be greatly appreciated. Thanks in advance!