WebSocket Connection Issue in socket.io Node App on Linux - CORS

Question

I have an app service running on Linux Ubuntu 20 (B1 Plan), according to the docs, web socket is enabled there by default so there is no need to enable it explicitly manually like on Windows apps. App depends on npm packages for socket: socket.io@^4.7.4, socket.io-client@^4.7.4

I have deployed a web socket node app that is bundled with Webpack, and works like a charm on localhost, for tests for now I'm using origin: "*" to allow all connections for tests.

const io = new Server(socketServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

const port = process.env.PORT || process.env.CHAT_PORT || 8080;

I've deployed and checked the logs stream and it looks like it's working, I see the successful message at the end of the log: WebSocket server for CHAT is using default port 8080.

However, when trying to connect from any external host, I could not connect due to CORS issue.

Access to XMLHttpRequest at <socket-app-url> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So I've updated the API CORS configuration to include the app URL, and conditionally I've changed server origin as well.

const io = new Server(socketServer, {
  cors: {
    origin: process.env.NODE_ENV === 'production' 
      ? "https://my-client-app.app"
      : "*",
    methods: ["GET", "POST"],
  },
});

const port = process.env.PORT || process.env.CHAT_PORT || 8080;

Still nothing, so I've entered into Kudu debug bash to check if the NODE_ENV is set correctly - and it is (production).

Is there anything I still need to setup to make it possible to connect to the websocket?

Answer 1

@Konrad Kaliciński WebSocket support is typically enabled by default on Azure App Service for Linux, it's advisable to verify this setting. You can do so by accessing the Azure Portal, navigating to your App Service, and under the "Settings" section, selecting "Configuration." There, ensure that "Web sockets" is turned on within the "General settings" tab.

Next, consider your CORS configuration. While you have configured CORS in your socket.io server settings, Azure App Service has its own CORS settings that need to be adjusted. In the Azure Portal, go to your App Service, and under "API" in the left-hand menu, click on "CORS." Add your client app's URL (e.g., https://my-client-app.app) to the list of allowed origins to ensure proper communication between the client and server.

Additionally, if your app is behind a firewall or utilizes a Virtual Network (VNet), confirm that the firewall or network security group rules permit traffic on the port used for WebSocket connections, typically port 8080. On the client side, verify that your socket.io-client is configured to connect to the correct URL and port, as misconfigurations here can often lead to connectivity issues.

Security is another crucial aspect; if your client app is served over HTTPS, ensure that your WebSocket connections are also secure by using wss:// instead of ws://. Keep an eye on both server and client-side logs for any error messages or clues that might provide further insight into the issue.

Lastly, if you're using a custom domain, make sure that SSL/TLS is properly configured both on Azure and with your domain registrar. Also, be aware that Azure App Service may handle cross-origin requests differently based on request types, so ensure that both HTTP and WebSocket requests are set up to manage CORS appropriately. If the issue persists despite these checks, consider simplifying your setup or deploying to a different environment to further isolate the problem.