CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

I keep getting the following error for my AngularJS application hosted on Heroku:

Access to Image at 'https://d15790c7fypqrz.cloudfront.net/attachments/product_template_pictures/images/000/490/265/grid/832816_122.png' from origin 'http://.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://.herokuapp.com' is therefore not allowed access.

How do I resolve it? This is the code which does the base64 conversion:

function createBase64Property(product, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(product, dataURL);
  };
  img.src = product.imageUrl;
  if (img.complete || img.complete === undefined) {
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
    img.src = product.imageUrl;
  }
}

My web.js configuration is as follows:

var gzippo = require('gzippo');
var express = require('express');
var morgan = require('morgan');
var cors = require('cors')

var app = express();

app.use(morgan('dev'));
app.use(gzippo.staticGzip(__dirname));
app.use(cors({credentials: true, origin: true}));
app.all('*', function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   res.header('Access-Control-Allow-Headers', 'Content-Type');
   next();
});
app.listen(process.env.PORT || 5000);

via methuselah