CORS not working on Heroku but works locally with Node js

Question

I have a contact form on my Angular Js website with a back end of express and node mailer for emails which works fine when i test it locally but when i deploy it on Heroku i get an error: CORS request did not succeed. I've been on this for a while without a way, any suggestion would be great.Thanks

here is my code

const cors = require("cors");
const http =  require("http");
const path = require('path');
const nodemailer = require("nodemailer");
var bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(cors({origin:"*"}));


const port = process.env.PORT || 1996

app.use(express.static(__dirname + "/dist/Orisha"));

app.get('/*', (req,res)=>res.sendFile(path.join(__dirname+"/dist/Orisha/index.html")));

app.post("/sendmail", (req,res)=>{

    console.log(req.body, 'data of form');
    var transporter = nodemailer.createTransport({
      service: 'gmail',
      host: 'smtp.gmail.com',
      secure: 'true',
      port: '465',
      auth: {
        user: 'hhdhjssw@gmail.com', // must be Gmail
        pass: 'password'
      }
    });

    var mailOptions = {
        from: `${req.body.email}`,
        to: 'hdsywuxwjd@gmail.com', // must be Gmail
        cc:`${req.body.firstName} <${req.body.email}>`,
        subject: `${req.body.subject}`,
        html: `
                <table style="width: 100%; border: none">
                  <thead>
                    <tr style="background-color: #000; color: #fff;">
                      <th style="padding: 10px 0">Name</th>
                      <th style="padding: 10px 0">E-mail</th>
                      <th style="padding: 10px 0">Message</th>
                      <th style="padding: 10px 0">Feedback</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th style="text-align: center">${req.body.firstName} ${req.body.lastName}</th>
                      <td style="text-align: center">${req.body.lastName}</td>
                      <td style="text-align: center">${req.body.Email}</td>
                      <td style="text-align: center">${req.body.message}</td>
                      <td style="text-align: center">${req.body.feedback}</td>
                    </tr>
                  </tbody>
                </table>
              `
      };

      transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
          console.log(error);
        } else {
          console.log('Email sent: ' + info.response);
          res.status(200).json({
            message: 'successfuly sent!'
          })
        }
      });

})


const server = http.createServer(app);

server.listen(port,()=>console.log("Running on http://localhost:1996/"))

And this is the error i get on Heroku:

:

Answer 1

That's because your on https trying to access a resource that is actually running over http. Same-origin Policy

You can do two things to solve this problem:

1. You must check your production environment variables to check if you're not trying to access an dev hosted API (http) on production (https)
2. Heroku serves your app both over http and https. Try to access your app on heroku using http. Like this: http://orishaa.herokuapp.com