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

【问题标题】：Access to image has been blocked by CORS only on WindowsCORS 仅在 Windows 上阻止了对图像的访问
【发布时间】：2020-10-22 09:26:39
【问题描述】：

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 函数将 url 传递给编辑器

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

在以下位置访问图像 'cdn.domain.shop/eaa49b02e350627622904290a83599d6.png' 来自原产地 “example.org”已被 CORS 政策阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。

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

我做错了什么？

【问题讨论】：

标签： vue.js cors toast-ui-image-editor

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

什么是快速解决方案？

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

说明问题和解决方案

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

首先您必须知道，默认情况下，当您加载带有<img> 标记但没有crossorigin="anonymous" 属性的图像时，浏览器不会发送Origin 标头。 More info

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

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

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

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

【讨论】：