Getting CORS from Angular client when connecting .Net6 API for Azure SignalR service in default mode.

Question

I am using Anular10, Azure SignalR service in Default mode and .Net6.

API is connecting with connectionstring and return is Success.

When Angular is connecting to API endpoint, it is showing CORS error.

I have used .Net AzureSignalRSDK package and microsoft@signalr npm package..

Error I am getting in Angular -

Access to fetch at 'http://110.227.203.159:8082/notificationHub/negotiate?negotiateVersion=1' from origin 'http://localhost:4200' 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'.
zone-evergreen.js:1068 
        
        
       POST http://110.227.203.159:8082/notificationHub/negotiate?negotiateVersion=1 net::ERR_FAILED

Answer

@Saumyabrata Bhattacharya The error message indicates that the server is not allowing cross-origin requests from your Angular application.

To enable CORS on an Azure Function app, you need to go to the CORS configuration screen under the Platform features tab of your Function app in the Azure portal. CORS with Access-Control-Allow-Credentials must be enabled for the SignalR client to call the negotiate function. Select the checkbox to enable it.

In the Allowed origins section, add an entry with the origin base URL of your web application.

Here is an example of how to configure CORS in your Azure Function app's host.json file:

{
  "IsEncrypted": false,
  "Values": {
    // values
  },
  "Host": {
    "CORS": "http://localhost:4200",
    "CORSCredentials": true
  }
}

Make sure to replace http://localhost:4200 with the origin base URL of your Angular application.

Share via

Getting CORS from Angular client when connecting .Net6 API for Azure SignalR service in default mode.

1 answer