How to fix CORS when using React, Node.js and Socket.io (v 4.0.0)

Viewed 83

I'm having issues with CORS in production when using React, Socket.io, and Node.js.

Client Side:

import { io } from 'socket.io-client';
const socket = io('https://warm-wildwood-81069.herokuapp.com');

Server Side:

const app = require("express")();
const server = require("http").createServer(app);

const io = require("socket.io")(server, {
    cors: {
        origin: "https://priceless-swirles-68e598.netlify.app",
        methods: [ "GET", "POST" ]
    }
});

Both client and server are running 4.0.0 version of Socket.io.

The errors that I'm getting are as follows:

Access to XMLHttpRequest at 'https://warm-wildwood-81069.herokuapp.com/socket.io/?EIO=4&transport=polling&t=NXV7rQn' from origin 'https://priceless-swirles-68e598.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and:

GET https://warm-wildwood-81069.herokuapp.com/socket.io/?EIO=4&transport=polling&t=NXV7rQn net::ERR_FAILED

Live Demo: https://priceless-swirles-68e598.netlify.app

0 Answers
Related