Websocket connection to xxxx failed for React Static Web App + Django App Service application

Nicholas 20

I have a react frontend hosted on Static Web Apps and Django backend hosted on App Service with Azure Redis cache server.

I'm using the base websocket functionality (no other libraries) and for django I'm using channels-redis.

Everything should be set up properly as my websocket connection work fine locally but on Azure it does not work at all, saying my websocket connection failed with no other error message or way to debug this.

index-CCaVDsll.js:6 WebSocket error:

Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}
isTrusted: true
bubbles: false
cancelBubble: false
cancelable: false
composed: false
1. currentTarget: WebSocket {url: 'wss://XXXXXXX.azurewebsites.net/ws/XXXXXXX/XXXXX/', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
2. defaultPrevented: false
3. eventPhase: 0
4. returnValue: true
5. srcElement: WebSocket {url: 'wss://XXXXXXX.azurewebsites.net/ws/XXXXXXX/XXXXX/', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
6. target: WebSocket {url: 'wss://XXXXXXX.azurewebsites.net/ws/XXXXXXX/XXXXX/', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
7. timeStamp: 8701.199999988079
8. type: "error"
9. [[Prototype]]: Event

Nicholas 20 Reputation points

2025-05-05T06:21:42.1633333+00:00

I have tried everything. I am disappointed
Prabhavathi Manchala 1,370 Reputation points Microsoft External Staff Moderator

2025-05-05T06:46:16.88+00:00
Hi Nicholas,

It seems you're having trouble connecting your React frontend (on Azure Static Web Apps) to your Django backend (on Azure App Service) via WebSocket. Since it works locally but not on Azure.

Possible causes for WebSocket connection failure on Azure include using ws:// locally instead of wss:// for secure connections in production, WebSockets being disabled by default in Azure App Service settings, network or firewall restrictions blocking WebSocket traffic, incorrect or unreachable Redis server affecting Django Channels, improper CORS configuration blocking the connection, and WebSocket errors lacking sufficient details for diagnosis.

Ensure your React frontend uses wss:// (e.g., wss://yourapp.azurewebsites.net/ws/...) instead of ws:// for secure WebSocket connections in production.

Enable WebSockets in Azure App Service by navigating to Azure Portal -> your App Service -> Configuration -> General settings -> enable WebSockets.

Check network/firewall settings to ensure your App Service allows traffic on port 443 for wss:// connections and that no firewall restrictions block WebSocket traffic.

Verify your Redis service and Django Channels configuration, ensuring Django can reach the Redis server by testing connectivity and checking Redis settings.

Allow CORS for WebSocket connections by configuring Django’s CORS settings to permit connections from your React app's domain. https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-rest-api#enable-cors

Enable detailed logs in Django for WebSockets to gather more error information and use browser DevTools to inspect WebSocket network requests.
Nicholas 20 Reputation points

2025-05-06T06:37:44.37+00:00
Hi Prabhavathi, thanks for your response. I have tried all of the above.

I used wss:// for production. My App Service is running on Linux which means the WebSockets is always on, and I enabled it in azure CLI again. Network traffic is set to allow all. Here are my settings:
{ "acrUseManagedIdentityCreds": false,

"acrUserManagedIdentityId": null,

"alwaysOn": true,

"apiDefinition": null,

"apiManagementConfig": null,

"appCommandLine": "export WEBSITES_PORT=8000 && daphne -b 0.0.0.0 -p 8000 --proxy-headers main_site.asgi:application\n",

"appSettings": null,

"autoHealEnabled": false,

"autoHealRules": null,

"autoSwapSlotName": null,

"azureStorageAccounts": {},

"connectionStrings": null,

"cors": {

"allowedOrigins": [ "https://FRONTEND_URL" ], "supportCredentials": false

},

"defaultDocuments": [

"Default.htm", "Default.html", "Default.asp", "index.htm", "index.html", "iisstart.htm", "default.aspx", "index.php", "hostingstart.html"

],

"detailedErrorLoggingEnabled": false,

"documentRoot": null,

"elasticWebAppScaleLimit": 0,

"experiments": {

"rampUpRules": []

},

"ftpsState": "FtpsOnly",

"functionAppScaleLimit": null,

"functionsRuntimeScaleMonitoringEnabled": false,

"handlerMappings": null,

"healthCheckPath": null,

"http20Enabled": false,

"httpLoggingEnabled": true,

"id": "/subscriptions/XXXXXXX-XXXX-XXXXXX-XXXXXX/resourceGroups/rg-XXXXXXXXX/providers/Microsoft.Web/sites/XXXXXXXXXX",

"ipSecurityRestrictions": [

{ "action": "Allow", "description": "Allow all access", "headers": null, "ipAddress": "Any", "name": "Allow all", "priority": 2147483647, "subnetMask": null, "subnetTrafficTag": null, "tag": null, "vnetSubnetResourceId": null, "vnetTrafficTag": null }

],

"ipSecurityRestrictionsDefaultAction": "Allow",

"javaContainer": null,

"javaContainerVersion": null,

"javaVersion": null,

"keyVaultReferenceIdentity": null,

"kind": null,

"limits": null,

"linuxFxVersion": "PYTHON|3.12",

"loadBalancing": "LeastRequests",

"localMySqlEnabled": false,

"location": "Southeast Asia",

"logsDirectorySizeLimit": 100,

"machineKey": null,

"managedPipelineMode": "Integrated",

"managedServiceIdentityId": null,

"metadata": null,

"minTlsCipherSuite": null,

"minTlsVersion": "1.2",

"minimumElasticInstanceCount": 1,

"name": "XXXXXXXXXXX",

"netFrameworkVersion": "v4.0",

"nodeVersion": "",

"numberOfWorkers": 1,

"phpVersion": "",

"powerShellVersion": "",

"preWarmedInstanceCount": 0,

"publicNetworkAccess": "Enabled",

"publishingUsername": "$XXXXXXXXX",

"push": null,

"pythonVersion": "",

"remoteDebuggingEnabled": true,

"remoteDebuggingVersion": "VS2022",

"requestTracingEnabled": false,

"requestTracingExpirationTime": null,

"resourceGroup": "rg-XXXXXXX",

"scmIpSecurityRestrictions": [

{ "action": "Allow", "description": "Allow all access", "headers": null, "ipAddress": "Any", "name": "Allow all", "priority": 2147483647, "subnetMask": null, "subnetTrafficTag": null, "vnetSubnetResourceId": null, "vnetTrafficTag": null }

],

"scmIpSecurityRestrictionsDefaultAction": "Allow",

"scmIpSecurityRestrictionsUseMain": false,

"scmMinTlsVersion": "1.2",

"scmType": "GitHubAction",

"tags": {},

"tracingOptions": null,

"type": "Microsoft.Web/sites",

"use32BitWorkerProcess": true,

"virtualApplications": [

{ "physicalPath": "site\\wwwroot", "preloadEnabled": true, "virtualDirectories": null, "virtualPath": "/" }

],

"vnetName": "XXXXXXXX-XXXX-XXXXX-XXXX-XXXXXX_XXXXXXXX",

"vnetPrivatePortsCount": 0,

"vnetRouteAllEnabled": true,

"webSocketsEnabled": true,

"websiteTimeZone": null,

"windowsFxVersion": null,

"xManagedServiceIdentityId": null

}

My Django and Redis server runs fine as I can execute other tasks with it.

I am using API in my static web app to link my backend App Service to it, but I noticed this point under API Constraints in the Microsoft documentation for static web apps API:

Only HTTP requests are supported for APIs. WebSocket, for example, is not supported.

I wonder if the above is the reason my websocket does not work. Please help, thank you!
Prabhavathi Manchala 1,370 Reputation points Microsoft External Staff Moderator

2025-05-08T08:47:22.99+00:00

Hi Nicholas,

Thanks for confirming that your issue has been resolved! If possible, please share the solution with the community, it could be helpful to others facing similar problems.

Accepted answer

Prabhavathi Manchala 1,370 Reputation points Microsoft External Staff Moderator

2025-05-09T01:19:02.6+00:00

Hi Nicholas,

I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this!

Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll repost your solution in case you'd like to "Accept " the answer.

Issue:

Websocket connection to xxxx failed for React Static Web App + Django App Service application

Solution:

After unlinking my app service from my static web app, I was able to finally get the websocket connection through.

Please click Accept Answer and kindly upvote it so that other people who faces similar issue may get benefitted from it.
Please sign in to rate this answer.

1 person found this answer helpful.
Alekhya Vaddepally 1,340 Reputation points Microsoft External Staff Moderator

2025-05-09T18:45:50.72+00:00

Hi Nicholas,
If this answer was helpful and pointed you in the right direction, please consider clicking "Accept Answer"—it may benefit other community members reading this thread. If you have any further questions, feel free to let us know.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

1 additional answer

Nicholas 20 Reputation points

2025-05-07T00:59:09.2133333+00:00

After unlinking my app service from my static web app, I was able to finally get the websocket connection through.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Your answer