2

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: enter image description here

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: []
    }
  }
}
5

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.