-1

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 图像编辑器。在点击处理程序中，我通过loadImageFromURL函数将 url 传递给编辑器

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

从源“example.org”访问“cdn.domain.shop/eaa49b02e350627622904290a83599d6.png”图像已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

但是当我在 Ubuntu 的 Chrome 中做同样的事情时，一切正常。

我究竟做错了什么？

4

3 回答 3

-1

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

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

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

于 2020-10-22T13:18:01.067 回答
-1

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

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

于 2021-07-13T05:34:41.703 回答
-1

什么是快速解决方案？

在编辑器中打开图像之前，在显示图像crossorigin="anonymous"的标签中添加属性。<img>IE：<img src="targetUri" crossorigin="anonymous" />

说明问题和解决方案

主要问题与缓存以及浏览器如何发送Origin标头有关。

首先，您必须知道，默认情况下，Origin当您加载带有<img>不具有该crossorigin="anonymous"属性的标签的图像时，浏览器不会发送标头。 更多信息

发生的情况是浏览器尝试<img>在打开图像编辑器之前从标签加载图像，并将其放入缓存中。

因此，当您打开编辑器时，它会尝试第二次加载图像，并且您实际上会获得第一个请求的缓存响应，该响应是在没有Origin标头的情况下发出的。如果没有此标头，则该缓存响应不包含allow-control-*通过 CORS 检查所需的所有标头，这就是您收到错误的原因。

您可以通过打开 Chrome 的检查器并选中“禁用缓存”来检查这一点。它应该工作。之前建议包含参数的帖子?t=<random_number>具有绕过浏览器缓存的效果，但是在使用预签名 url 时，这种解决方案是不可能的。

所以添加crossorigin="anonymous"img标签应该可以解决问题。

于 2021-09-29T12:01:26.913 回答