[Vuejs]-Access to image has been blocked by CORS only on Windows

by

0👍

What’s the quick solution ?

Add the attribute crossorigin="anonymous" in the <img> tag that displays the image before opening it in the editor.
ie: <img src="targetUri" crossorigin="anonymous" />

Explain the issue and solution

The main issue is related to caching and how the browser send the Origin header.

First you have to know that by default the browser does not send the Origin header when you load an image with the <img> tag that does not have the crossorigin="anonymous" attribute.
More info

What’s happening is that the browser tries to load the image from the <img> tag before the image editor is opened, and the puts it into its cache.

So when you open the editor, it tries to load the image a second time, and you actually get a cached response of the first request that was made without the Origin header. Without this header, that cached response does not contain all the allow-control-* headers necessary to pass the CORS check, that why you get the error.

You can check this, by opening Chrome’s inspector with "disable cache" checked. It should work.
The previous posts that suggested to include a parameter ?t=<random_number> had the effect to bypass the browser cache, but this solution is not possible when using pre-signed urls.

So adding crossorigin="anonymous" in the img tag should solve the problem.

-1👍

just add random string to url

this.$refs.editor.invoke("loadImageFromURL",this.img+'?'+Math.random(), "Editable image");

the error was due to caching in the browser

-1👍

After that you have to make sure that every URL you request from Chrome and Safari uses http:// instead of https://. HTTPS retrieval will not work in these browsers at all.

some allows both http and https requests I solved it with a small regular expression that replaced our https URL string with http.

Leave a comment