Socket.io React App: Access to XMLHttpRequest at 'https://myserverURL/socket.io/xyz' from origin 'https://.mynetlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Support
, ,
1

Hey everyone, I am trying to deploy my first ever web application which is an online multiplayer pictionary game similar to the website skribblio. I am using socket.io for the first time to accomplish this.

Front End - React - github.com/ryanhayame/pictionary-client
Live deployment on Netlify: https://aipictionarywithfriends.netlify.app/

Back End - Express.js - github.com/ryanhayame/server-test
Live deployment on Railway: server-test-production-cd09.up.railway.app/

Although I was able to run my project perfectly fine locally on localhost3000, I am having some CORs problems when switching over to a public deployment. Specifically, in my console I am getting the error:

Access to XMLHttpRequest at ‘https://server-test-production-cd09.up.railway.app/socket.io/?EIO=4&transport=polling&t=OMbQ5-Q’ from origin ‘https://main--unique-marzipan-68664e.netlify.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Server File:

const express = require(“express”);
const app = express();
const http = require(“http”);
const cors = require(“cors”);
const { Server } = require(“socket.io”);
app.use(cors());

const server = http.createServer(app);

const io = new Server(server, {
cors: {
origin: “*”, // this was localhost3000 when running locally
methods: [“GET”, “POST”],
},
maxHttpBufferSize: 1e8
});

Client File:

import io from “socket.io-client”;
export const socket = io.connect(“https://server-test-production-cd09.up.railway.app”);
// this was localhost3001 when running locally

From the googling I did on this general issue, I found stuff related to redirects, headers, and netlify.toml which I tried to follow but found no success. Can anyone help me solve this issue please? Thanks.

3

Here are some of the changes I’ve made since I started googling:

My netlify.toml file in the root directory:

[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = “/"
[headers.values]
Access-Control-Allow-Origin = "”

My _headers file in the public directory (next to index.html):

/*
Access-Control-Allow-Origin: *

Tried adding function headers by combining info from

and

to get:

SERVER:

const io = new Server(server, {
cors: {
origin: “*”,
methods: [“GET”, “POST”],
allowedHeaders: [‘Access-Control-Allow-Origin’]
},
maxHttpBufferSize: 1e8
});

CLIENT:

// testing io() instead of io.connect()
export const socket = io(“https://server-test-production-cd09.up.railway.app”, {
extraHeaders: {
‘Access-Control-Allow-Origin’: ‘*’
}
});

EDIT: After making these changes, I am now getting a new, similar error:

blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

4

@ryanh797 See my response here, as the core of the answer applies to you:

You cannot just upload and run a socket server with Netlify, you would need to host it elsewhere.

5

Correct me if I am wrong, but I believe my socket server being hosted on Railway. Unless I have a poor understand of how the Netlify front end is being connected with the Railway backend.

6

Sorry, I missed that as I only skim read what you had posted, you’d be suprised how frequently this question comes up where the person is trying to host the socket server on Netlify.

In your case if the client side code is connecting directly to the socket server on Railway, then the connection is between the users browser and railway and has nothing to do with Netlify (unless you’re proxying those requests via a redirect).

Edit: Just a heads up that the URL you’ve provided for the live deployment of the front-end doesn’t load for me either, so I can’t actually see the cors error that you’re encountering on the front-end.

7

Sorry, just fixed the link to the front end. Thanks for all the help so far. Does this mean I need a proxy and redirects to solve the issue?

8

I FINALLY FIGURED IT OUT! I ended up adding a proxy and redirects. Thanks for the help!

My final code:

Client and _headers:

Same as my second post

Server:

Same as my second post except elsewhere in my server code I changed this:

server.listen(3001, () => {
console.log(“SERVER RUNNING”);
});

To this:

const PORT = process.env.PORT || 3001;
server.listen(PORT, () => {
console.log(“SERVER RUNNING”);
});

netlify.toml:

[[redirects]]
from = “/api/"
to = “https://server-test-production-cd09.up.railway.app/:splat”
status = 200
force = true
headers = {X-From = “Netlify”}
[[headers]]
for = "/”
[headers.values]
Access-Control-Allow-Origin = “*”

9

Hi @ryanh797 and others, I’ve been trying to fix this error for so long. This really helped :slight_smile:

10

thanks for letting us know you found this solution helpful.