HI folks Im getting into problems with CORS in image from CSM while processing image on Webflow. I have recorded video to explain the problem . I will be very grateful if anyone can help with this issue.
Hi all I will really appreciate if someone who understand Webflow deeply (staff or expert) can explain why I’m getting CORS while I’m on the same ORIGIN. Why image stored in Webflow CMS and processed on Webflow page have CORS problem.
Thanks in advance
So I have wrote code to get average color to avoid external libraries but still getting CORS and only way to make it work is refreshing browser. as on normal gem change sill getting CORS. Can Someone can help to improve this code to avoid this odd behaviour?
document.addEventListener("DOMContentLoaded", () => {
const img = document.getElementById('gem-main-img');
const rect = document.querySelector("#gem-bg-stripe");
img.onload = function () {
getAverageColor(img)
}
img.crossOrigin = "anonymous"
function getAverageColor(img) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let width = canvas.width || img.naturalWidth;
let height = canvas.height || img.naturalHeight;
let draw = ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
let r = 0;
let g = 0;
let b = 0;
for (let i = 0, l = data.length; i < l; i += 4) {
r += data[i];
g += data[i+1];
b += data[i+2];
}
r = Math.floor(r / (data.length / 4));
g = Math.floor(g / (data.length / 4));
b = Math.floor(b / (data.length / 4));
console.log("R:",r,"G:",g,"B:",b)
//return { r: r, g: g, b: b };
rect.style.background = `rgb(${r},${g},${b})`;
}
getAverageColor(img)
})
Thanks
I tought that is SOLVED by moving one line of the code but getting another error
Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
document.addEventListener("DOMContentLoaded", () => {
const img = document.getElementById('gem-main-img');
const rect = document.querySelector("#gem-bg-stripe");
img.onload = function () {
img.crossOrigin = "anonymous"
getAverageColor(img)
}
function getAverageColor(img) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let width = canvas.width || img.naturalWidth;
let height = canvas.height || img.naturalHeight;
let draw = ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
let r = 0;
let g = 0;
let b = 0;
for (let i = 0, l = data.length; i < l; i += 4) {
r += data[i];
g += data[i+1];
b += data[i+2];
}
r = Math.floor(r / (data.length / 4));
g = Math.floor(g / (data.length / 4));
b = Math.floor(b / (data.length / 4));
console.log("R:",r,"G:",g,"B:",b)
//return { r: r, g: g, b: b };
rect.style.background = `rgb(${r},${g},${b})`;
}
getAverageColor(img)
})
It’s not same origin, if you see the url of your image is on the webflow cdn, you must use a CORS reverse proxy like this one https://cors-anywhere.herokuapp.com (cors-anywhere.herokuapp.com)
Yeah, I was now looking on URL’s and found that website it self and database have two different URL’s. I am familiar with Herokuapp trick that can be handy on localhost but in production doesn’t make sense (to me) All is working with Firefox that use some algorithm to avoid these situations but it is only one browser.
Up to now I didn’t pay attention to database and now I have realised that is not part of website. This is strange to me as DB should be tight to website and not behave as reaching data of someone else. I do not get why Webflow data that are stored in CMS aren’t directly related to page the CMS was created/activated from.
Can Someone explain to me how this actually works in Webflow? Mean, how to make data in CMS to be related to website to avoid CORS?
Probably I’m not as clever as I thought because after reading many articles about CORS to refresh my knowledge on CORS to get missing pieces I still didn’t get why I’m getting CORS on Webflow as IMHO it shouldn’t be the case.
CMS is decoupled from sites, all assets of Webflow that are uploaded from CMS are on a s3 bucket of webflow. Some tags like IMG and VIDEO ignore CORS, some others will not and will require CORS to be enabled, this is not something that you can do on your own, is something that can be enabled only from server side, and since Webflow is a closed system you can’t modify the server output
1 Like
I have got that part (with server) I’m just disappointed that I can’t do simple processing on IMG because Webflow doesn’t allow that so I have no access to images that are on website and getting into CORS problems.
The question is, is there a way to be able an access images from CMS and why Webflow doesn’t allow that behaviour on their side, mean why website (code) doesn’t have natural rights to access images stored in CMS created for this site.
Only through a reverse cors proxy. Because technically the image is not on your server but on an external one, so you have no rights to open it, it’s a different domain. You should ask their support to open up the bucket to allow cors for your domain, I doubt they will ever do it though, since that domain assets.webflow is shared between all the websites
Or to get freedom and just stay with standard developing and Heroku. I’m familiar with some glitches/problems that Webflow have with plain JS and I can live with that but this creativity “freedom” is not I have expected. That said is still great tool but limiting creativity is not good experience.