仅在Windows上，CORS阻止了对图像的访问

问题描述

Vue组件具有一个照片块和一个“编辑”按钮。

<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>

作为照片编辑器，我使用TUI image editor。在点击处理程序中，我通过loadImageFromURL函数将网址传递给编辑器

当我在Windows的Chrome中单击“编辑”按钮时，出现错误

访问图像 来源的“ cdn.domain.shop/eaa49b02e350627622904290a83599d6.png” “ example.org”已被CORS政策阻止：否 请求中出现“ Access-Control-Allow-Origin”标头 资源。

但是当我在Ubuntu的Chrome中执行相同的操作时，一切正常。

我在做什么错了？

解决方法

只需将随机字符串添加到url

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

该错误是由于浏览器中的缓存

,

之后，您必须确保从 Chrome 和 Safari 请求的每个 URL 都使用 http:// 而不是 https://。 HTTPS 检索在这些浏览器中根本不起作用。

some 允许 http 和 https 请求我用一个小的正则表达式解决了它，用 http 替换了我们的 https URL 字符串。