node.js - Node js_CORS block access

Question

I'm trying to communicate with the front react at localhost:3000 and the backend side nodeJS is localhost:5000 but the problem I keep getting this message and I can't find a solution how to solve it

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=3&transport=polling&t=NSheHsx' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET-polling-xhr.js:268 GET http://localhost:5000/socket.io/?EIO=3&transport=polling&t=NShel1V net::ERR_FAILED

I tried every solution on the internet but without any chance

var corsOptions = {
  origin: "https://localhost:3000/",
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors(corsOptions));

this is the server.js

require("dotenv").config();
const express = require("express");
const morgan = require("morgan");
const cors = require("cors");
const loadRoutes = require("./routes/index");
const app = express();
var server = require("http").createServer(app);
var io = require("socket.io")(server);
const path = require("path");
let stream = require("./controllers/stream");
var corsOptions = {
  origin: "https://localhost:3000/",
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors(corsOptions));
app.use(express.json());
app.use(fileUpload());

// database config
require("./config/db");

//require config
require("dotenv").config({
  path: "./config/config.env",
});

//config for only developement

if (process.env.NODE_ENV === "developement") {
  app.use(
    cors({
      origin: process.env.CLIENT_URL,
    })
  );
}
app.use(morgan("dev"));
//load all routes
loadRoutes(app);


io.of("/stream").on("connection", stream);
//---------------------------------------------
app.use((req, res, next) => {
  res.status(404).json({
    success: false,
    message: "Page Not found",
  });
});

//start our web server and socket.io server listening
server.listen(process.env.PORT, function () {
  console.log(`listening on ${process.env.PORT}`);
})

changes that I made based on answer below but same error

require("dotenv").config();
const express = require("express");
const morgan = require("morgan");
const cors = require("cors");
const loadRoutes = require("./routes/index");
const app = express();
var server = require("http").createServer(app);
var io = require("socket.io")(server);
const path = require("path");
let stream = require("./controllers/stream");
var corsOptions = {
  origin: "http://localhost:3000/",
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
// add this headers to your request and yow problems will be gone.
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

app.use(cors(corsOptions));
app.use(express.json());
app.use(fileUpload());

// database config
require("./config/db");

//require config
require("dotenv").config({
  path: "./config/config.env",
});

//config for only developement

if (process.env.NODE_ENV === "developement") {
  app.use(
    cors({
      origin: process.env.CLIENT_URL,
    })
  );
}
app.use(morgan("dev"));
//load all routes
//cors anwser2
app.option("*",cors())
    loadRoutes(app);
    

io.of("/stream").on("connection", stream);
//---------------------------------------------
app.use((req, res, next) => {
  res.status(404).json({
    success: false,
    message: "Page Not found",
  });
});

//start our web server and socket.io server listening
server.listen(process.env.PORT, function () {
  console.log(`listening on ${process.env.PORT}`);
})

Any idea on solving this error ?

question from:https://stackoverflow.com/questions/65851842/node-js-cors-block-access

Answer 1

have you already tried enabling PREFLIGH like described on 'cors' lib? There is a section on the docs explaining about 'complex' requests that need to make a preflight request before making the actual request.

Here is a simple way to enable to test:

app.options('*', cors()) // include before declaring the route

I got this information from this section on the readme here: https://www.npmjs.com/package/cors#enabling-cors-pre-flight

Tho it's not recomended using wildcard '*' in production, so be careful :) hope I helped