Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firefox CORS error during Socket.IO reconnection while Chrome works fine #5288

Open
Vanals opened this issue Feb 4, 2025 · 0 comments
Open
Labels
to triage Waiting to be triaged by a member of the team

Comments

@Vanals
Copy link

Vanals commented Feb 4, 2025

Description
I'm experiencing CORS issues specifically during Socket.IO reconnection attempts in Firefox, while Chrome works fine. The initial connection works in both browsers, but Firefox fails to reconnect with:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:1337/socket.io/?EIO=4&transport=polling&t=htb75obx. (Reason: CORS request did not succeed). Status code: (null).

Setup
Client (localhost:3000)

// SocketContextComponent.tsx
const socket = useSocket('ws://localhost:1337', {
    reconnectionAttempts: 10,
    reconnectionDelay: 1000,
    reconnectionDelayMax: 5000,
    autoConnect: false,
    randomizationFactor: 0.5
});

Server (localhost:1337)

// socket.ts
const socketOptions = {
    serveClient: false,
    pingInterval: 10000,
    pingTimeout: 5000,
    cookie: false,
    cors: {
        origin: '*',
        methods: ["GET", "POST", "OPTIONS"],
        allowedHeaders: ["my-custom-header", "Content-Type"],
        credentials: true,
        preflightContinue: false,
        optionsSuccessStatus: 204
    },
    connectionStateRecovery: {
        maxDisconnectionDuration: DISCONNECT_TIMEOUT_MS,
        skipMiddlewares: true,
    }
};

// server.ts (Express server code snipet)
application.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
    
    if (req.method == 'OPTIONS') {
        res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');
        return res.status(200).json({});
    }
    next();
});

Versions

// Client
"socket.io-client": "^4.7.4"
"next": "14.1.0"

// Server
"socket.io": "^4.7.4"
"express": "^4.18.2"

Behavior
Initial connection works in both browsers
When disconnecting:
Chrome reconnects successfully
Firefox fails with CORS error
The error only occurs during reconnection attempts
Questions
Is there a known issue with Firefox handling Socket.IO reconnections differently?
Are there Firefox-specific CORS settings I should consider?
Could the ws:// protocol in the client (vs http://) be causing issues?

Any insights would be greatly appreciated! Let me know if I can provide any more specific logs?

I checked the documentation https://socket.io/docs/v4/handling-cors/ here but did not manage to solve it my self.

@Vanals Vanals added the to triage Waiting to be triaged by a member of the team label Feb 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
to triage Waiting to be triaged by a member of the team
Projects
None yet
Development

No branches or pull requests

1 participant