I am using XMLHttpRequest to make api requests. I am getting CORS error and when I inspect the browser I see that the request.send(event.target.result)is underlined in red which is where the error is coming from. I set my headers correct. Why is this happening? Works fine in localhost but when server file is pushed to heroku I get this error

***SERVER***
const express = require('express');
const bodyParser =  require('body-parser')
require('dotenv').config();
const https = require('https');
const port = process.env.PORT || 5000;
const app = express();
const cors = require('cors');

//Setting up the cors config
app.use(cors());


//Prevent application from crashing if incorrect route
app.all('*', (req, res, next) =>{
  const err = new Error(`Requested URL ${req.path} not found!`);
  err.statusCode = 404;
  next(err);
})

app.use((err, req, res, next) =>{
  const statusCode = err.statusCode || 500;
  res.status(statusCode).json({
    success: 0,
    message: err.message,
    stack: err.stack
  })
})


//Serve static files if in production
if(process.env.NODE_ENV === 'production'){

  //Set static folder
  app.use(express.static('client/build'));

  app.get('*', (req, res) =>{
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
  });
}



app.listen(port, () => console.log(`Server started on port ${port}`));

***FRONTEND***
      let fileReader = new FileReader()
      fileReader.readAsArrayBuffer(images[0])

      let request = new XMLHttpRequest()
      request.open('POST',apiRoute,true)
      request.setRequestHeader("Content-Type", "application/octet-stream");
      request.setRequestHeader("image-data", JSON.stringify(data));

      fileReader.addEventListener('load',(event)=>{


      request.send(event.target.result)//When I inspect the browser, it underlines this line in red
      })