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
No comments:
Post a Comment