Problem with 'No 'Access-Control-Allow-Origin' header' with express and react application

Question

I'm going to do a project in Node/Express just to level up in javascript, but I have a problem with 'Access-Control-Allow-Origin'. I can't do a get request from the front and I don't know why. I have see in the other post but nothing work.

this is my index.js :

 const express = require('express'); const mongoose = require('mongoose'); const config = require('./config'); const bodyParser = require('body-parser'); const morgan = require('morgan'); mongoose.connect(config.DATABASE_URL, { useUnifiedTopology: true, useNewUrlParser: true }); const db = mongoose.connection; db.on('error', console.error.bind(console, 'Error connecting to the database')); db.once('open', function () { console.log("Connection to the database successfully"); }); require('./models/Partner'); const index = express(); index.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); index.use(bodyParser.json()); index.use(bodyParser.urlencoded({ extended: false })); index.use(config.ROOT_API + '/', require('./routes/homeRouter')); index.use(config.ROOT_API + '/partner', require('./routes/partnerRouter')); index.use(morgan('dev')); index.listen((config.HOST), () => console.log('Started on port ' + config.HOST));

I added this to try to make it work, but obviously it doesn't work ..

 index.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

Thank you for you answer ! :)

Answer 1

Try this

const allowCors = function (req, res, next) {
console.log("Came to cros");

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X- 
Requested-With, Content-Type, Accept");
res.header('Access-Control-Allow-Methods', 'GET, POST, 
PUT, DELETE, OPTIONS');
next();
};

And try adding Bellow

index.use(allowCors);

After

index.use(bodyParser.urlencoded({ extended: false }));

Answer 2

if you need just for testing go to run ( windows+R )

write chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

and try again in your new browser which opened

Hope it works for you

Answer 3

Try to add this in your express (index.js)

const express = require('express');
const mongoose = require('mongoose');
const config = require('./config');
const bodyParser = require('body-parser');
const cors = require('cors') // Add this package do npm i cors first
const morgan = require('morgan');

mongoose.connect(config.DATABASE_URL, { useUnifiedTopology: true, useNewUrlParser: true });
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'Error connecting to the database'));
db.once('open', function () {
    console.log("Connection to the database successfully");
});

require('./models/Partner');

const index = express();
// Use the Middlware as below
index.use(cors());
index.use(bodyParser.json());
index.use(bodyParser.urlencoded({ extended: false }));

index.use(config.ROOT_API + '/', require('./routes/homeRouter'));
index.use(config.ROOT_API + '/partner', require('./routes/partnerRouter'));
index.use(morgan('dev'));
index.listen((config.HOST), () => console.log('Started on port ' + config.HOST));

For futher reference look at this link