Azure function CORS configuration with SignalR Service not working

Question

I'm trying to connect to SignalR Service Azure function from a react front end.

In front

const urlRoot = 'http://localhost:7071/api';
const connection = new HubConnectionBuilder()
    .withUrl(urlRoot
    )
    .build();

In Azure function I allow CORS in local.setting.json

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureSignalRConnectionString": "xxxxxx"
  },
  "Host": {
    "CORS": "*",
    "CORSCredentials": false
  }
}

But when I run my app a request is triggered to http://localhost:7071/api/negotiate?negotiateVersion=1 ( I don't know why HubConnectionBuilder() is adding negotiateVersion=1

The problem is that I'm getting Cors error even after adding authorization in local.settings.json

Access to XMLHttpRequest at 'http://localhost:7071/api/negotiate?negotiateVersion=1' from origin 'http://localhost:3000' 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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

The answer at https://stackoverflow.com/a/42297459/441757 may or may not be relevant — sideshowbarker, Apr 06 '20 at 02:11

score 1 · Answer 1 · answered Jul 24 '21 at 19:10

If running locally you need to set

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureSignalRConnectionString": "xxxxxx"
  },
  "Host": {
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

Where your react app is running locally on post 3000. As the wildcard is not supported.

score 1 · Answer 2 · answered Apr 15 '22 at 00:27

The problem here is not "just" the CORS configuration.

The way to connect to the Azure SignalR Service is a little different from the way we connect to a conventional SignalR hub.

First, we need to access the "/api/negotiate" endpoint and acquire the access token, them, with the token, we can connect to the service.

Follow below a code that I'm using:

export const myComponent = () => {

    const [signalRConnection, setSignalRConnection] = useState(null);

    useEffect(() => {

        //Get the access token...
        axios.post("http://localhost:7071/api/negotiate?negotiateVersion=1")
           .then((response) => {
                
                const options = {
                    accessTokenFactory: () => response.data.accessToken,
                };
            
                //Connect using the token
                const newConnection = new HubConnectionBuilder()
                  .withUrl("http://localhost:7071/api", options)
                  .withAutomaticReconnect()
                  .build(HttpTransportType.None);

               setSignalRConnection(newConnection);
           });
       }, []);

   useEffect(() => {
    
       if (signalRConnection) 
       {
           signalRConnection
               .start()
               .then((result) => {
               
                   console.log("Connected SignalR Hub!");

                   signalRConnection.on("myEvent", (message) => {
                     /* Do something.... */
                   });
                });
              })
               .catch((e) => console.log("Connection failed: ", e));
        }
   }, [signalRConnection]);

};

And about the CORS configuration, you can't use "*" to specify the client application.

Use something like that

{
  "Host": {
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

score -1 · Answer 3 · answered Apr 06 '20 at 15:14

-1

Login to your Azure account and make sure CORS is enabled and http://localhost:3000 is added CORS sETTING

answered Apr 06 '20 at 15:14

neuvee

9

Azure function CORS configuration with SignalR Service not working

3 Answers3