SingalR Angular Error 404

osyris 231 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.
3,153 questions
0 comments

3 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. osyris 231 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 231 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 24,316 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