Socket IO issue: CORS policy is blocking access to XMLHttpRequest

Question

Socket IO issue: CORS policy is blocking access to XMLHttpRequest

My application recently encountered an error.

"Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

When connecting to socket.io, I haven't found a solution to this issue yet. Details are described in the image below. Has anyone else faced this error before?

https://i.stack.imgur.com/m1n3I.png

Server configuration:

var express = require('express');
var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  next();
});
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server, {log:false, origins:'*:*'});

Client configuration:

var socket = io('https://my-service-domain', {transports: ['polling']});
socket.on(channel_id, function(data){
     // some code
});

I attempted to change the websocket connection option to

var socket = io('https://my-service-domain', {transports: ['websocket']})

, but it resulted in the following error:

"WebSocket connection to 'wss://my-service-domain/socket.io/?EIO=3& transport = websocket' failed: Error during WebSocket handshake: Unexpected response code: 400 "

node.js express sockets websocket socket.io

Answer 1

Answer №1


When working with Socket.IO version 3, make sure to explicitly enable Cross-Origin Resource Sharing (CORS) in your setup.
const io = require("socket.io")(httpServer, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

httpServer.listen(3000);

Answer 2


When working with Socket.IO version 3, make sure to explicitly enable Cross-Origin Resource Sharing (CORS) in your setup.
const io = require("socket.io")(httpServer, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

httpServer.listen(3000);

Answer 3

Answer №2

After spending 2 hours on it, I finally found the solution that works perfectly. All you need to do is replace the existing code with this:

const express = require("express")
var app = express();
var server = app.listen(4000);
var io = require('socket.io')(server, {
    cors: {
      origin: '*',
    }
});

Answer 4

After spending 2 hours on it, I finally found the solution that works perfectly. All you need to do is replace the existing code with this:

const express = require("express")
var app = express();
var server = app.listen(4000);
var io = require('socket.io')(server, {
    cors: {
      origin: '*',
    }
});

Answer 5

Answer №3

Give this a shot:

const server = new HTTPServer(io, {
  permission: {
    allow: true,
    validate: true,
  },
  compatibilityMode: true,
});

I found success using the code above. For more details, check out this reference link

Answer 6

Give this a shot:

const server = new HTTPServer(io, {
  permission: {
    allow: true,
    validate: true,
  },
  compatibilityMode: true,
});

I found success using the code above. For more details, check out this reference link

Answer 7

Answer №4

When dealing with multiple URLs:

const io = require('socket.io')(server, {
    cors: {
      origin: ['url1','url2',..]
    }
});

Answer 8

When dealing with multiple URLs:

const io = require('socket.io')(server, {
    cors: {
      origin: ['url1','url2',..]
    }
});

Answer 9

Answer №5

In the case that you are utilizing the HTTPS protocol, consider implementing this code snippet:

const https = require('https');

Answer 10

In the case that you are utilizing the HTTPS protocol, consider implementing this code snippet:

const https = require('https');

Answer 11

Answer №6

Encountering a similar error where your request access has been blocked? Try updating your code from..... const socket = io('http://localhost:8000'); to the following: const socket = io('http://localhost:8000',{transports: ['websocket']});

This adjustment should allow your code to function properly.

Answer 12

Encountering a similar error where your request access has been blocked? Try updating your code from..... const socket = io('http://localhost:8000'); to the following: const socket = io('http://localhost:8000',{transports: ['websocket']});

This adjustment should allow your code to function properly.

Answer 13

Answer №7

If you're looking to address cross-origin resource sharing (CORS) in your application, consider using the npm package called cors. Begin by installing CORS with the command below:

npm install cors

Next, import the CORS package at the top of your application file like so,

const cors = require('cors');

Then, utilize this constant variable as a middleware in your code,

app.use(cors());

This setup will effectively manage all CORS-related configurations and requirements for you.

Please Note: Remember to include the app.use(cors()); line before initializing your routers to ensure proper functionality.

Answer 14

If you're looking to address cross-origin resource sharing (CORS) in your application, consider using the npm package called cors. Begin by installing CORS with the command below:

npm install cors

Next, import the CORS package at the top of your application file like so,

const cors = require('cors');

Then, utilize this constant variable as a middleware in your code,

app.use(cors());

This setup will effectively manage all CORS-related configurations and requirements for you.

Please Note: Remember to include the app.use(cors()); line before initializing your routers to ensure proper functionality.

Answer 15

Answer №8

One method I discovered to work around this issue is by utilizing the prependListener function. Please note that this solution specifically applies to socket.io version 4.1.0 and later.

const express = require('express')
const app = express()
const server = require('http').createServer(app);
const io = require('socket.io')(server)
io.on('connection', socket=>{
   // handle all socket events here
});

// Use these lines for handling CORS
server.prependListener("request", (req, res) => {
   res.setHeader("Access-Control-Allow-Origin", "*");
});
// You can specify a specific domain/servername instead of using "*"
server.listen(7000, () => {
   console.log("Socket server is now running");
});

Answer 16

One method I discovered to work around this issue is by utilizing the prependListener function. Please note that this solution specifically applies to socket.io version 4.1.0 and later.

const express = require('express')
const app = express()
const server = require('http').createServer(app);
const io = require('socket.io')(server)
io.on('connection', socket=>{
   // handle all socket events here
});

// Use these lines for handling CORS
server.prependListener("request", (req, res) => {
   res.setHeader("Access-Control-Allow-Origin", "*");
});
// You can specify a specific domain/servername instead of using "*"
server.listen(7000, () => {
   console.log("Socket server is now running");
});

Answer 17

Answer №9

After deploying my nodejs app with socket.io on Heroku, I encountered an error in my browser. It turned out that the issue was caused by not including a start script in the package.json file. Without this script, Heroku was unable to initiate my app. Once I added the start script as required, the problem was quickly resolved.

Answer 18

After deploying my nodejs app with socket.io on Heroku, I encountered an error in my browser. It turned out that the issue was caused by not including a start script in the package.json file. Without this script, Heroku was unable to initiate my app. Once I added the start script as required, the problem was quickly resolved.

Socket IO issue: CORS policy is blocking access to XMLHttpRequest

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Issues arise after upgrading Node and npm, causing an inability to execute any npm command

Navigable MEAN.js paths for CRUD operations

error encountered in node.js express route.get() function

Tips for sending a variable from Express to a Jade template

Store the user's login credentials securely in the browser's local storage

Using Node.js and Express to import a simple JavaScript file as a router

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

When the Node.js code is executed, it will send back an XML element for any ID parameter

"During the testing phase, the req.body object is found

What could be causing the request.body to be considered as undefined?

Module not found even after executing npm install within Docker container

After deploying my Node.js/Express.js application to AWS Lambda, I encountered a bcrypt error

Node.js encountered an error: Module "express" not found

Setting up Webpack and Babel for ReactJS development

Is npm global feature going unused?

What is the best way to upload a file in Node.js using Express and Multer?

Using fs.createWriteStream across multiple processes

Unable to utilize npm package

What is the best way for a parent process to interrupt a child_process using a command?

What is the simplest method for transferring data to and from a JavaScript server?