0

I'm new to web development, javascript, and node js. I know that there are a lot of questions on the cors error already I have spent 2 days looking at solutions to my problem but I can't figure out how to solve this cors error. yesterday after 2 days of searching I finally found a solution that worked at first but now it only works 20% of the time and the other 80% I get another error. I set up my socket.io and tried to send sockets through socket.io exactly as shown in this youtube video: https://www.youtube.com/watch?v=rxzOqP9YwmM&t=5s Although my code was exactly the same as in the video I kept getting a cors error when sending sockets.

Here is some of my server-side code:

const io = require("socket.io")(3000);
var fs = require('fs');

io.on("connection", socket => {...

Here is some of my client side code:

const socket = io("http://localhost:3000");

socket.on("new_partner", recieved_data => {
    partner_user.username = recieved_data;
    socket.emit("logged_in", this_user.username);
});
...

Here is the head of my html:

<head> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">        
        <meta charset="utf-8">
        <title>real time chat</title>
        <link rel="stylesheet" href="chat_room.css">
        <script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
        <script defer src="script.js"></script>
        <script defer src="login.js"></script>
    </head>

Here is the cors error I kept getting with the above code:

Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=4&transport=polling&t=NP9ZPIk' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

After A LOT of searching I changed my server-side code to this:

const io = require("socket.io")(3000, { cors: { origin: "*", }, });
var fs = require('fs');

io.on("connection", socket => {

The first time I ran the new code everything worked PERFECTLY. After some additional testing, I soon realized this method only works 20-30% of the time. The other 70% of the time I kept getting some other random errors. today when I tried to reproduce the errors to be able to ask on StackOverflow (here) for some help, I wasn't getting the same error as yesterday anymore. I don't know what exactly is going on since I'm a huge beginner to web development but here are the errors I keep getting today when I try to send sockets to my server from my client:

GET http://localhost:3000/socket.io/socket.io.js net::ERR_CONNECTION_REFUSED

Uncaught ReferenceError: io is not defined at script.js:1

Uncaught ReferenceError: socket is not defined at login.js:1

I should also mention that with this new method unlike with the cors error I can get my site to load but once I try sending sockets that's when the error pops up in the console.

I know this is probably basic and that one of these days I really need to sit down and thoroughly look at the socket io documentation, but I really don't have the time with this project's deadline right now. Again I apologize for my ignorance and thanks in advance. Here is all of my code if it helps:

html(index.html): https://pastebin.com/RQ7zNzdy

client-side script(script.js): https://pastebin.com/1P0DJ6HH

client side login(script.js): https://pastebin.com/fqtNRQvg

server side script(server.js): https://pastebin.com/NTL6ynup

css of my website(not that it matters): https://pastebin.com/24rF8urG

The Tiger
  • 1
  • 1
  • The CORS error is just a side effect of the ERR_CONNECTION_REFUSED problem. If you fix whatever is causing the ERR_CONNECTION_REFUSED problem, you’ll find that your existing CORS confirmation is already working as expected. – sideshowbarker Dec 09 '20 at 23:09
  • @sideshowbarker I updated the error code, because I found out I posted the wrong error code ... verry slopy of me. Regarding your comment: Thanks for the tip if I don't get a definate answer till tomorrow when I wake up I will invastigate the ERR_CONETION_REFUSEED_ error a bit more. – The Tiger Dec 09 '20 at 23:14

1 Answers1

0

Here is the post that might help. To verify if that is the problem try running client from e.g. Firefox.

jjablonski
  • 33
  • 1
  • 5