Heroku app with node.js block CORS from time to time

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:)