Signalr hosted on Azure gives 405 Method Not Allowed - azure

Question

Trying to deploy my website to Azure, Signalr gives the following errors on the browser:
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
For this call:
hubs/presence/negotiate?negotiateVersion=1:1
Followed by:
Error: Failed to complete negotiation with the server: Error: The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used.: Status code '405'
Here are the endpoints:
app
.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<PresenceHub>("hubs/presence");
});
The website works on https, and the urls are defined as follows:
export const environment = {
production: true,
apiUrl:'https://vidcallme.azurewebsites.net/api/',
hubUrl:'https://vidcallme.com/hubs/',
baseUrl:'/'
};
The api works, the hub doesn't.
Here's the Api web.config
<system.webServer>
<handlers>
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\API.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
</system.webServer>
The client is written with Angular.
Here is my client web.config:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<verbs allowUnlisted="true">
<add verb="POST" allowed="true" />
</verbs>
</requestFiltering>
</security>
</system.webServer>
</configuration>
Related:
SignalR Error 405 (method not allowed) - Negotiate

Answer 1

The issue in your side. It shows Allow: GET, HEAD, OPTIONS, TRACE, except POST. This is the reason.
You can refer below code.
<security>
<requestFiltering>
<verbs allowUnlisted="true">
<add verb="POST" allowed="true" />
</verbs>
</requestFiltering>
</security>

Answer 2

The mistake was at the enviorment.prod.ts.
Should look like this:
export const environment = {
production: true,
apiUrl:'https://vidcallme.azurewebsites.net/api/',
hubUrl:'https://vidcallme.azurewebsites.net/hubs/',
baseUrl:'/'
};