CORS error when using fetch() in JavaScript

Code Help HTML/CSS/JS
1

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
2

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
3

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

1 Like
4

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

1 Like
5

Tried that, same error…

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

1 Like
6

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

1 Like
7

image
Apparently no requests were made…

Is this the right tab?

1 Like
8

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

2 Likes
9

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
10

This is what is in the response headers section:

image
image552×624 13.7 KB

1 Like
11

Doesn’t work either…

1 Like
12

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
13

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?

14

You can use app.get

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

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?

16

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
17

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

18

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

19

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

20

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

1 Like