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

[ryanh797]

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

_headers / .toml / CORS

Thanks guys! As in 2022, it’s still a lifesaver to add a headers property to the returned object: return { statusCode: 200, headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "application/json", }, body: JSON.stringify(json), };

and

Handling CORS | Socket.IO

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.