SingalR Angular Error 404

osyris 236 Reputation points
2022-04-24T04:09:57.907+00:00

I am trying to install SignalR on Angular.
I have achived this before with ReactJs

Looking at several Forum topics and articles I cant really get it to work:

Error Code that i get:

Utils.js:149 [2022-04-24T03:47:55.451Z] Error: Failed to start the connection: Error: Failed to complete negotiation with the server: Error: <!DOCTYPE html>
<pre>Cannot POST /Chat/negotiate</pre>
: Status code '404' Either this is not a SignalR endpoint or there is a proxy blocking the connection.

it prints the top error about 3 times

I tried to show the code that i tried but when i try to upload it i get Error Acces denied on this forum several times

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,385 questions
0 comments No comments
{count} votes

3 answers

Sort by: Most helpful
  1. osyris 236 Reputation points
    2022-04-24T04:11:27.597+00:00

    The Rest of the post

    Asp net core. Program.cs

    //Code...
    
    builder.Services.AddCors(options =>
    {
        options.AddPolicy(name: "Angular",
            builder =>
            {
                builder.WithOrigins("https://localhost:44376", "https://localhost:7231")
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowAnyOrigin();
            });
    });
    
    // Code...
    
    
    app.MapControllerRoute(
        name: "default",
        pattern: "{controller}/{action=Index}/{id?}");
    
    app.MapFallbackToFile("index.html"); ;
    
    app.MapHub<ChatHub>("Chat");
    
    app.Run();
    

    ChatHubs.cs

    using Microsoft.AspNetCore.SignalR;
    
    namespace DeliveryRestaurant.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendAll(string message)
            {
    
                await Clients.All.SendAsync("ReceiveAllMessage", message);
            }
    

    Angular Ts

    ngOnInit(): void {
    
          let connection = new signalR.HubConnectionBuilder()
          .withUrl("Chat")
          .build();
        connection.on("ReceiveAllMessage", data => {
          console.log("REceived Data", data);
        });
        connection.start()
          .then(() => connection.invoke("ReceiveAllMessage", "Hello"));
            }  }
    

  2. osyris 236 Reputation points
    2022-04-25T11:25:17.073+00:00

    Thank you for your Reply

    Try to remove the above code.

    I Cannot Remove the "Services.AddCors" part or else all of my Get, Post Request dont work anymore.

    The Url that all of my Get and Post Request is: https://localhost:7231/

    So when i Do

    connection = new signalR.HubConnectionBuilder()
          .withUrl("https://localhost:7231/Chat")
          .build();
      
    

    It no longer gives me that 404 error
    But i get another error instead:

    Access to fetch at 'https://localhost:7231/Chat/negotiate?negotiateVersion=1' from
    origin 'https://localhost:44476' has been blocked by CORS policy: Response to preflight
    request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin'
    header in the response must not be the wildcard '
    ' when the request's credentials mode is 'include'.*

    I also removed the part:

    builder.WithOrigins("https://localhost:44376", "https://localhost:7231")
    

    so my code looks like this:

    builder.Services.AddCors(options =>
    {
        options.AddPolicy(name: "Angular",
            builder =>
            {
                builder.
                 AllowAnyMethod()
                .AllowAnyHeader()
                .AllowAnyOrigin();
    
            });
    });
    

    it still gives me the same error


  3. Zhi Lv - MSFT 32,096 Reputation points Microsoft Vendor
    2022-04-27T01:29:36.31+00:00

    Hi @osyris ,

    Glad to hear that the issue was resolved, based on our previous discussions, I've summed up an answer below, helping it may help others who have the same problem.

    Utils.js:149 [2022-04-24T03:47:55.451Z] Error: Failed to start the connection: Error: Failed to complete negotiation with the server: Error: <!DOCTYPE html>
    <pre>Cannot POST /Chat/negotiate</pre>
    : Status code '404' Either this is not a SignalR endpoint or there is a proxy blocking the connection.

    To above 404 error, the issue relates the HubConnection's URL, we should change the code as below:

       connection = new signalR.HubConnectionBuilder()  
             .withUrl("https://localhost:7231/Chat")  
             .build();  
    

    Access to fetch at 'https://localhost:7231/Chat/negotiate?negotiateVersion=1' from
    origin 'https://localhost:44476' has been blocked by CORS policy: Response to preflight
    request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin'
    header in the response must not be the wildcard '' when the request's credentials mode is 'include'.*

    To the above error, since the https://localhost:44476 origin was not added in the WithOrigins method, so it will show this CORS error.

    The value of the 'Access-Control-Allow-Origin'
    header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

    And to the above error, since when we use the AllowAnyOrigin method, it will add a '*' at the request header, so to solve the above issue, we need to remove the AllowAnyOrigin method.

    After modified the result should like this:

    builder.Services.AddCors(options =>  
      {  
        options.AddPolicy(name: "Angular",  
            builder =>  
            {  
                builder.WithOrigins("https://localhost:44376", "https://localhost:44476", "https://localhost:7231")  
                .AllowAnyMethod()  
                .AllowAnyHeader();  
            });  
     });  
    

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    0 comments No comments