Back

Technologies:

javascriptjavascript
node.jsnode.js
avatar
Tolerim
a month ago

How can I resolve the issue of blocked cors in socket.io on a nodejs deployment to a Vercel app?

For a realtime chat app, I am utilizing socket.io; however, I am encountering an issue with socket as all APIs work except socket. On my console, I receive the following message: Access to XMLHttpRequest at 'https://example-server.vercel.app/socket.io/?EIO=4&transport=polling&t=OVLsA1y&sid=GaWraRTVn-d2od-LAAAC' from origin 'https://example.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. I have used the following links to resolve this issue without success: https://stackoverflow.com/questions/24058157/socket-io-node-js-cross-origin-request-blocked, https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe. The following is my client code: 
const socket = io("https://example-server.vercel.app", {withCredentials: true,}).connect();
The following is my server code: 
const io = new Server(server, {
    cors: {
        origin: true,
        credentials: true,
        methods: ["GET", "POST"],
        allowedHeaders: ["my-custom-header"],
        exposedHeaders: ["my-custom-header"],
    },
    allowEIO3: true,
});
It is worth noting that my code works when run locally. I appreciate any help you can offer on this matter.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems like you are encountering a CORS (Cross-Origin Resource Sharing) issue. This error occurs when a web application tries to access resources from a different domain than the one that served the original web page. To fix this issue, you need to enable CORS on your server-side code. You can do this by adding the following code to your server-side code: 
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});
This code will allow any domain to access your server's resources. If you want to restrict access to specific domains, you can replace the * with the domain name. You can also try adding the following code to your server-side code: 
io.origins('*:*');
This code will allow any domain to connect to your socket.io server. I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
a month ago
This error is being caused by the CORS policy implemented on the server. When making requests to a different domain, the server needs to explicitly allow these requests by including the Access-Control-Allow-Origin header in its response. In this case, it looks like the server is not including this header in its response, which is why the browser is blocking the request from the client. One possible solution would be to modify the CORS options on the server to explicitly allow requests from the client's domain. Based on the code provided, it looks like the server is using the cors option to handle CORS. You can modify this option to include the domain of the client by adding it to the origin array. For example: 
const io = new Server(server, {
    cors: {
        origin: ['https://example.vercel.app'],
        credentials: true,
        methods: ["GET", "POST"],
        allowedHeaders: ["my-custom-header"],
        exposedHeaders: ["my-custom-header"],
    },
    allowEIO3: true,
});
This should allow requests from https://example.vercel.app to access the socket.io endpoint.
;