I wanted to deploy a node.js backend in Heroku, working on the front end with react deployed on Vercel. From time to time, the front request to heroku backend are blocked by CORS policy, just like this:
Access to XMLHttpRequest at ‘https://pokedex-deployment-luis.herokuapp.com/pokemons/11’ from origin ‘https://react-node-pokedex-git-dev-luisea97.vercel.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Is strange for me, because NOT EVERY CALL TO THE BACKEND ARE BLOCKED, ONLY FROM TIME TO TIME. For example, if I reload the page 2 or 3 times it successfully make request to backend without CORS blocking.
I have my code in node like this:
index.js:
const server = require('./src/app.js');
const { conn } = require('./src/db.js');
// Syncing all the models at once.
conn.sync({ force: false }).then(
async () => {
await server.listen(process.env.PORT, () => {
console.log('%s listening at ' + process.env.PORT); // eslint-disable-line no-console
});
});
app.js:
const express = require('express');
const morgan = require('morgan');
const routes = require('./routes/index.js');
const cors = require('cors')
require('./db.js');
const server = express();
server.name = 'API';
server.use(morgan('dev'));
server.use(express.json());
//Cors
server.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // update to match the domain you will make the request from
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
next();
});
server.use('/', routes);
// Error catching endware.
server.use((err, req, res, next) => { // eslint-disable-line no-unused-vars
const status = err.status || 500;
const message = err.message || err;
console.error(err);
res.status(status).send(message);
});
module.exports = server;
I’ve tried manage CORS like this:
server.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // update to match the domain you will make the request from
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
next();
});
like this other one way:
//Cors
server.use(cors())
/* server.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // update to match the domain you will make the request from
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
next();
}); */
like this other way:
server.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'https://react-node-pokedex-git-dev-luisea97.vercel.app/'); // with vercel production app's domain
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
next();
});
or even like this:
server.use(cors())
server.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // update to match the domain you will make the request from
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
next();
});
with no success
Can anyone tell me what am I missing or doing wrong?
Thanks in advance:)