asp.net core - Can't connect SignalR client in Angular 19 to SignalR server in .NET 9 - Stack Overflow

admin管理员组

文章数量:1203411

I am building a small app with Angular 19 and .NET 9 and I have the following issue with CORS:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:7002/hubs/communication/negotiate?negotiateVersion=1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 307.

I tried out many different solutions from many posts here on stackoverflow and official Microsoft docs (posts are probably a bit old since they're using .NET 7 and Angular 2.2).

My frontend side SignalR client has the following code to connect to the backend:

private startConnection() 
{
    this.hubConnection = new HubConnectionBuilder()
                                .withUrl('http://localhost:7002/hubs/communication')
                                .withAutomaticReconnect([100, 200, 500, 1000, 2000, 3000, 5000])
                                .build();
                                
    this.hubConnection
        .start()
        .then(() => console.log('Connection to Communication Hub succesful!'))
        .catch(err => console.log('Error establishing connection to Communication Hub: ' + err));
}

And in my backend side, the code in program.cs I have right now is as follows:

builder.Services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy", policy => policy.WithOrigins("http://localhost:4200")
                                                    .AllowAnyHeader()
                                                    .AllowAnyMethod()
                                                    .AllowCredentials());
});

var webSocketOptions = new WebSocketOptions
{
    KeepAliveInterval = TimeSpan.FromMinutes(2)
};

webSocketOptions.AllowedOrigins.Add("http://localhost:4200");

// Code omitted for brevity

app.MapHub<CommunicationHub>("/hubs/communication");
app.UseCors("CorsPolicy");
app.UseWebSockets(webSocketOptions);

UPDATE: After JasonPan suggested to change the order I now have it like this:

app.UseCors("CorsPolicy");
app.UseWebSockets(webSocketOptions);
app.MapHub<CommunicationHub>("/hubs/communication");

What am I doing wrong? Any help will be much appreciated : ).

UPDATE2: Here's a little sample project with the issue:

I am building a small app with Angular 19 and .NET 9 and I have the following issue with CORS:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:7002/hubs/communication/negotiate?negotiateVersion=1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 307.

I tried out many different solutions from many posts here on stackoverflow and official Microsoft docs (posts are probably a bit old since they're using .NET 7 and Angular 2.2).

My frontend side SignalR client has the following code to connect to the backend:

private startConnection() 
{
    this.hubConnection = new HubConnectionBuilder()
                                .withUrl('http://localhost:7002/hubs/communication')
                                .withAutomaticReconnect([100, 200, 500, 1000, 2000, 3000, 5000])
                                .build();
                                
    this.hubConnection
        .start()
        .then(() => console.log('Connection to Communication Hub succesful!'))
        .catch(err => console.log('Error establishing connection to Communication Hub: ' + err));
}

And in my backend side, the code in program.cs I have right now is as follows:

builder.Services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy", policy => policy.WithOrigins("http://localhost:4200")
                                                    .AllowAnyHeader()
                                                    .AllowAnyMethod()
                                                    .AllowCredentials());
});

var webSocketOptions = new WebSocketOptions
{
    KeepAliveInterval = TimeSpan.FromMinutes(2)
};

webSocketOptions.AllowedOrigins.Add("http://localhost:4200");

// Code omitted for brevity

app.MapHub<CommunicationHub>("/hubs/communication");
app.UseCors("CorsPolicy");
app.UseWebSockets(webSocketOptions);

UPDATE: After JasonPan suggested to change the order I now have it like this:

app.UseCors("CorsPolicy");
app.UseWebSockets(webSocketOptions);
app.MapHub<CommunicationHub>("/hubs/communication");

What am I doing wrong? Any help will be much appreciated : ).

UPDATE2: Here's a little sample project with the issue: https://gitlab.com/arendevel/corsissue

• angular
• asp.net-core
• signalr
• .net-9.0

Share Improve this question Follow edited Jan 21 at 15:36 Aren Devel asked Jan 21 at 7:26 Aren DevelAren Devel 1155 bronze badges 10

• Hi Aren Devel, the middleware order is wrong, app.UseCors("CorsPolicy"); should be placed before app.MapHub<CommunicationHub>("/hubs/communication");. – Jason Pan Commented Jan 21 at 8:18
• Please kindly check the official doc first, and tell us if it works, good luck. – Jason Pan Commented Jan 21 at 8:19
• 1 The status code is 307, meaning you are doing a redirect. What was missing from your code above but included in the sample app is the https redirection middleware. Either remove that, change your url to https, or add the https url to the cors configuration. – Brennan Commented Jan 21 at 21:29
• 1 @Brennan you're right. Removing the http redirection does work. The question now is: How do I make it work with http redirection? I added "localhost:4200" to the Cors policy but It won't work either. Thanks a lot for your answer : D – Aren Devel Commented Jan 22 at 6:26
• 1 @Brennan I just tested and connecting directly to the localhost:7063 port on the backend it does work. But the redirection from the http to https I can't make it work. But for now I guess that's good enough, thanks a lot for your answer. If you want, you can post it and I'll accept is as the correct answer. Once again, thanks a lot for your time I was lost. – Aren Devel Commented Jan 22 at 6:31

 |  Show 5 more comments

1 Answer 1

Sorted by: Reset to default 0

Thanks to @Brennan and @JasonPan I could find that the problem was connecting to the http port on backend from the frontend and having https redirection. Connecting directly to the https port solved it for me.

本文标签： aspnet coreCan39t connect SignalR client in Angular 19 to SignalR server in NET 9Stack Overflow