如何解决仅在Windows上,CORS阻止了对图像的访问
<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 字符串。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。