'GraphQL Subscriptions not working on Firefox - Error 400 bad Request

I have a Frontend app that is built in React and it is connected to a GraphQL backend using Apollo Client.

Queries and Mutations are working fine in all browsers, but I have an issue with the Subscriptions. On Google Chrome and Safari are working fine, but on Firefox I get always this two errors:

Firefox can’t establish a connection to the server at wss://my-backend.net/graphql-ws

GET wss://my-backend.net/graphql-ws - Error 400 Bad Request

And the wsLink in the Frontend looks like follows:

import { WebSocketLink } from '@apollo/client/link/ws';

        const wsLink = new WebSocketLink({
            uri: process.env.REACT_APP_WEBSOCKET_URL || '',
            options: {
                reconnect: true,
                reconnectionAttempts: getReconnectAttempts(process.env.REACT_APP_WEBSOCKET_RECONNECTION_ATTEMPTS),
                connectionParams: () => ({
                    Authorization: authStore.token,
                    'Ocp-Apim-Subscription-Key': process.env.REACT_APP_SUBSCRIPTION_TOKEN as string,
                }),
            },
        });

Does anyone have any idea of what is happening here? Why is it working well on Chrome and not on Firefox?

Thank you all in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source