Negotiation call from React TypeScript client webapp to Azure SignalR service is giving CORS error in browser and 403 forbidden in Postman.

Prateek Khanna 0 Reputation points
2023-05-15T07:11:43.2433333+00:00

I am facing issue while trying to connect to Azure SignalR service from my React TypeScript client web app. My azure resource is in default mode. I have tried after configuring "*", "http://localhost:3000" for CORS origins on azure portal but nothing was helpful.

The call is returning following error:
Access to fetch at '<Azure-endpoint>/hubname/negotiate' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

When the API call is extracted from network tab and triggered through Postman, it is returning 403 Forbidden. However upon switching to serverless mode and using an Azure Function in local environment, the React App is able to establish the connection.

Am I missing some configuration which is resulting to CORS issue in default mode?

Azure SignalR Service
Azure SignalR Service
An Azure service that is used for adding real-time communications to web applications.
120 questions
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Ryan Hill 25,486 Reputation points Microsoft Employee
    2023-05-16T04:13:12.6833333+00:00

    Without having more information about your SignalR service @Prateek Khanna , i.e., your React App have the hub or something else. But since you've already configured CORS to * and used http://localhost:3000, it's difficult to say what's going on.

    Until more information is provided about the SignalR service you're deploying/using; I suggest using live tracing tool along with troubleshooting methods to troubleshoot the connection issues.

    If you're not deploying any function app, that's more than likely why you're getting the error because there is no hosted negotiate method for your client to establish the connection, see serverless mode for more information.

  2. Prateek Khanna 0 Reputation points
    2023-05-16T07:43:24.7533333+00:00

    After going through this link => https://learn.microsoft.com/en-us/azure/azure-signalr/signalr-concept-internals I realized that client React App is suppose to call the service which has the HUB and it's logic (.NET MVC app in my case).

    The issue got resolved once I gave the url for the service app in withUrl() extension method of HubConnectionBuilder.

    0 comments