title: Api is throwing a Cors error after pending for few seconds in angular?
body: <p>I have <code>angular10</code> on <code>front-end</code> and <code>node.js(express)</code> on back-end. My all <code>rest</code> <code>apis</code> are working fine. But there is only issue with only one api.</p>
  <p>Here is my server <code>app.js</code> code</p>
  <pre><code>// process.env.NODE_ENV = 'production';
  
  require('dotenv').config();
  const express = require('express');
  const bodyParser = require('body-parser');
  const http = require('http');
  const cors = require('cors');
  var routes = require('./routes/index');
  const dbService = require('./services/db.service');
  const { jwtAuth } = require('./middleware/jwtAuth');
  const { startEmailJob } = require('./Jobs/emailJob');
  const { startSmsJob } = require('./Jobs/smsJob');
  
  
  const dbEnvironment = process.env.NODE_ENV;
  
  //  connecting to database
  const db = dbService(dbEnvironment, true).start();
  
  const app = express();
  app.use(express.static('uploads'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  // console.log(__dirname + '/uploads')
  app.use(jwtAuth);
  app.use((req, res, next) =&gt; {
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
     res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
     res.setHeader('Access-Control-Allow-Credentials', true);
     next();
  });
  
   app.use(cors());
   app.use(routes);
  
  
   const server = http.Server(app);
  
   const PORT = process.env.SERVER_PORT || 3002;
  
   server.listen(PORT, () =&gt; {
   if (dbEnvironment !== 'production' &amp;&amp;
      dbEnvironment !== 'development' &amp;&amp;
      dbEnvironment !== 'testing'
     ) {
       console.error(`NODE_ENV is set to ${dbEnvironment}, but only production and development are valid.`);
      process.exit(1);
  }
    startEmailJob()
    startSmsJob()
    console.log(`server running on port ${PORT} for ${dbEnvironment}`);
    return db;
  });
  </code></pre>
  <p>We have our deployment <code>on aws-ec2</code> and we have our <code>domain(https along with redirection from http to https)</code> on which we are running our <code>front-end</code>.</p>
  <p>All apis are working fine but just <code>file uploading</code> api is causing an issue. The issue i am facing is that when i call <code>file upload</code> api first time from live front-end so for the first time my <code>file upload</code> request goes for pending for around <code>50,60 seconds</code> and then it throws <code>CORS</code> like this</p>
  <pre><code>Access to XMLHttpRequest at 'https://pk-openmarket.openport.com:8443/api/web/upload-files' from origin 'https://pk-openmarket.openport.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  </code></pre>
  <p>but when i <code>replay</code> that failed <code>request</code> from <code>Chrome Developers Console Network's</code> tab so it works fine and document starts uploading. So i am not getting exactly that what is the issue here?</p>
  <p>Failed request is here</p>
  <p><a href="https://i.stack.imgur.com/AiZXz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AiZXz.png" alt="enter image description here" /></a></p>
  <p>And then when i replay that failed request from <code>chrome</code> so it works fine and it's headers and specs are here</p>
  <p><a href="https://i.stack.imgur.com/Vx5Ku.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vx5Ku.png" alt="enter image description here" /></a></p>