CORS error when using fetch() in JavaScript

I’m making a Tic-Tac-Toe game and so I have one repl with the game itself (made with HTML etc) and another repl that acts as the server (made with node.js and express.js) the game connects to and sends messages back and forth using Socket.io.

Game repl: https://replit.com/@SnakeByte/Tic-Tac-Toe-Ultimate?v=1
Server repl: https://replit.com/@SnakeByte/Tic-Tac-Toe-Ultimate-Server?v=1

So when the game repl loads, it initially tries to connect to the server using fetch(). But when I check the Chrome browser console, I get the following error(s):
Screenshot

I’ve stated the ‘Access-Control-Allow-Origin’ header and the CORS origin in index.js in the server repl but the browser doesn’t seem to detect it:

const io = sockets(server, {
  cors: {
    origin: "https://tic-tac-toe-ultimate.snakebyte.repl.co/",
    methods: ["GET", "POST"],
  },
});

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "https://tic-tac-toe-ultimate.snakebyte.repl.co/");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  next();
});

I have also run the webpage on Firefox, but I’m still getting the same error.
Can someone please help me solve this problem?

1 Like

Try setting the ‘Access-Control-Allow-Credentials’ header as well (in your server)

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "https://tic-tac-toe-ultimate.snakebyte.repl.co/");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  next();
});

2 Likes

Just added that and tried, but it still give’s the same error.

1 Like

For now try *, make sure you restarted your repl, and check the request for the headers.

1 Like

Tried that, same error…

What do you mean by check the request for the headers?

1 Like

Go to the network tab in devtools, find the request, and look at “response headers” section.

1 Like

image
Apparently no requests were made…

Is this the right tab?

1 Like

Yes, but your searched “search”. Also, it only starts recording when you open the window, so try reloading.

2 Likes

You can try a Preflight request (A CORS request that checks to see if the CORS protocol is understood)

Adapting from your code:

app.options('*', (req, res) => {
  // set CORS headers for preflight request
  res.header("Access-Control-Allow-Origin", "https://tic-tac-toe-ultimate.snakebyte.repl.co/");
  res.header("Access-Control-Allow-Methods", "GET, POST");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Credentials", "true");
  res.send('CORS headers set');
});

And then you check the network as @dragonhunter1 pointed out.

1 Like

This is what is in the response headers section:

1 Like

Doesn’t work either…

1 Like

May I ask why you are returning a html file? Also, try removing the ending / from your CORS url’s. This might affect it. (In the sockets area too)

One last possibility, app.use and app.options may not work for static files.

3 Likes

I removed the slashes, doesn’t work.

All I want the game repl to do is a send a fetch() to the server repl, and then the server to return JSON with a few parameters to check it connects successfully. I had no idea it returns a HTML file…

So what should I use instead?

You can use app.get

app.get("/api/connection-check", (req, res) => {
  res.json({ status: "success", message: "Connected successfully" });
});

What does the /api/connection-check file path mean?
And where do I add this in the code?
Will it help if I invite @dragonhunter1 and @WindLother to the repl to edit the code?

The /api/connection-check is a route you set up on your server so when your client makes a request to this URL, it hits this route, and the server responds with the JSON you defined.

You can add this right before your server.listen() (in your server file).
I think you can invite both of us. But I want to brainstorm along with @dragonhunter1 before making any adjustments too.

2 Likes

Seems like a good idea! If it still does not work you might have to try adding the headers manually.

I’ll just invite you to the repl too.
This might sound silly but what’s your username? :sweat_smile:

dragonhunter1? On ask your username is always your replit username unless your name is really long.

I did some updates in your code check if it’s working now @SnakeByte

1 Like