仅在 Windows 上被 CORS 阻止访问图像

Question

Vue component has a photo block and the "edit" button.

<template>
    <div>
        <tui-image-editor ref="editor" > </tui-image-editor>
        <div class="">
            <img :src="img">
            <button @click="edit()">Edit</button>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      img: "cdn.domain.shop/eaa49b02e350627622904290a83599d6.png",
    };
  },
  methods: {
    edit() {
      this.$refs.editor.invoke("loadImageFromURL", this.img, "Editable image");
    },
  },
};
</script>

As a photo editor, I use TUI image editor . In the click handler, I pass the url to the editor by loadImageFromURL function

when I click the "edit" button in Chrome in Windows I get an error

Access to image at 'cdn.domain.shop/eaa49b02e350627622904290a83599d6.png' from origin 'example.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But when I do the same thing in Chrome in Ubuntu, everything works fine.

What am I doing wrong?

Answer 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

Answer 2

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.

Answer 3

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.