Complete web dev newbie here. Trying to make my first learning project. My front end is made with Vue.js and hosted on Netlify. My backend is made with Node.js, Express and Socket.io. Currently, the backend is deployed with Render. Everything worked perfectly locally, but broke when I deployed stuff. right now it’s basically a bad chat app, with plans to turn it into more once I figure out how to actually deploy.

I’ve redacted the urls, or made them generic, but can confirm the URLs are accurate. This is the error:

Access to XMLHttpRequest at 'https://**redacted**.onrender.com/socket.io/?EIO=4&transport=polling&t=OysBd2j' from origin 'https://**subdomain.mydomain.ca' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have tried everything I could find online, no AI bot could help me so here I am.

TW: bad code

Here is the script for my frontend vue app:

<script>
import { io } from 'socket.io-client';
import JoinView from './views/JoinView.vue';
import LobbyView from './views/LobbyView.vue';
import ChatView from './views/ChatView.vue';

export default {
  data() {
    return {
      socket: null,
      //other variables here
    };
  },
  mounted() {
    this.socket = io('https://**redacted**.onrender.com');
    this.initSocketListeners();
  },
  components: {
    JoinView,
    LobbyView,
    ChatView
  },
  methods: {
    // My methods are here
    },
  },
};
</script>

Backend Node.js:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const https = require('https');
var cors = require('cors') 
const io = require('socket.io')(https, {
  handlePreflightRequest: (req, res) => {
    console.log("Entered Preflight Request")
    const headers = {
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
      "Access-Control-Allow-Origin": req.headers.origin, 
      "Access-Control-Allow-Credentials": true
    };
    res.writeHead(200, headers);
    res.end();
  }
});

let rooms = [];
let users = [];

io.on('connection', (socket) => {
  console.log('User connected');

//my socket.io methods here.
}); 
const server = https.createServer(app);

server.listen(PORT, () => {
  console.log(`server listening on port ${PORT} (HTTPS)`);
});

This is the state of the code at this point, but there have been several renditions, as I have tried anything I could find on the web. AI has also pointed me in a bunch of directions but nothing.

I’ve tried setting cors stuff like this:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://**subdomain.mydomain.ca'); 
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  next();
});

Just recently, I tried adding the port of which the Render deployment is listening on, which is 10000. It does get rid of the cors error, but just makes the server not respond at all…

**redacted**.onrender.com:10000/socket.io/?EIO=4&transport=polling&t=OysE3Z9:1 
        
        
       Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
index-CL58avdU.js:21 
        
        
       GET https://**redacted**.onrender.com:10000/socket.io/?EIO=4&transport=polling&t=OysE8k3 net::ERR_CONNECTION_TIMED_OUT