Unable to connect to Azure SignalR service after deployment

Question

I have deployed an Azure SignalR service, also I have Azure Functions and Negotiate method with HTTPTrigger. After deployment Frontend + backend part, my frontend part cannot connect to SignalR service, but if I do it while proxy locally - it works. I suppose that the problem can be in my Azure Front Door. But I don't know where to look at Azure Frontdoor to access my SignalR.

I allowed CORS to * for the testing, but it does not work, looks like this is an Azure Front door blocks this, because we have a policy not to access to our service from public network. So I try yo understand how to fix an issue, any ideas? I tried to google up, but looks like it is not a fully clear CORS error. Thanks in advance!

This is an error I have from UI:

this is a code from UI:

const connection = new signalR.HubConnectionBuilder()
      .withUrl(url, {
          withCredentials: false,
      })
      .withAutomaticReconnect()
      .configureLogging(signalR.LogLevel.Information)
      .build();

This is my backend function inside function app:

[FunctionName(nameof(Negotiate))]
public SignalRConnectionInfo Negotiate(
    [HttpTrigger(AuthorizationLevel.Function)] HttpRequest req,
    [SignalRConnectionInfo(HubName = "notificationsSignalR", ConnectionStringSetting = "AzureSignalRConnectionString")] SignalRConnectionInfo connectionInfo)
{
        return connectionInfo;
}

This is my deployment script(it successfully deployed, connection string is presented in function app):

param namespace_name string 
param location string = resourceGroup().location

resource signalR 'Microsoft.SignalRService/signalR@2023-02-01' = {
  name: namespace_name
  location: location
  sku: {
    capacity: 2
    name: 'Standard_S1'
    tier: 'Standard'
  }
  kind: 'SignalR'
  identity: {
    type: 'SystemAssigned'
  }
  properties: {
    tls: {
      clientCertEnabled: false
    }
    features: [
      {
        flag: 'ServiceMode'
        value: 'Serverless'
        properties: {}
      }
      {
        flag: 'EnableConnectivityLogs'
        value: string(true)
      }
    ]
    cors: {
      allowedOrigins: [
        '*'
      ]
    }
    serverless: {
      connectionTimeoutInSeconds: 30
    }
    networkACLs: {
      defaultAction: 'Deny'
      publicNetwork: {
        allow: [
          'ClientConnection'
        ]
      }
      privateEndpoints: [
        {
          name: 'mySignalRService.1fa229cd-bf3f-47f0-8c49-afb36723997e'
          allow: [
            'ServerConnection'
          ]
        }
      ]
    }
    upstream: {
      templates: []
    }
  }
}

Answer 1

Firstly, I extended( as error says ) this rule in Azure Front Door:

FROM:

"default-src 'self' *.my.com graph.microsoft.com"

TO:

"default-src 'self' *.my.com graph.microsoft.com *.service.signalr.net"

After that fix I found second similar error: Refused to connect to 'wss://.....service.signalr.net........' because it violates the following Content Security Policy directive: "default-src 'self' *.my.com graph.microsoft.com *.service.signalr.net". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback

this is because Azure Front Door does not support Web Sockets, see: https://github.com/MicrosoftDocs/architecture-center/issues/1891#issuecomment-805714146

So, for me was applicable switching from WebSockets to Server Side Events(SSE) because I use direction only from Server to Client. After that, everything started working.

I hope my answer could be helpful for someone.