使用vue-cropper时，展示oss图片出现跨域问题解决

最新推荐文章于 2024-06-27 21:59:19 发布
最新推荐文章于 2024-06-27 21:59:19 发布
阅读量8.4k 收藏 5
点赞数 5
分类专栏： Vue 前端之旅 文章标签： Vue Vue-cropper oss图片 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Mocha/article/details/104024414
版权
本文介绍了在使用Vue-cropper组件显示阿里云OSS存储的图片时遇到的跨域问题，详细解析了问题的原因，并提供了解决方案，包括设置CORS策略和使用代理服务器等方法。
摘要由CSDN通过智能技术生成 
<vue-cropper ref="cropper" id="cropper"
             :img="options.img" :info="true" :autoCrop="options.autoCrop"
             :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight"
             :fixedBox="options.fixedBox" @realTime=
最低0.47元/天 解锁文章
是摩卡不是抹茶呀
关注
专栏目录
阿里云oss访问图片出现跨域问题
weixin_30344995的博客
06-20 7631
// 获取图片地址并转码 var image = new Image(); image.crossOrigin = 'Anonymous'; image.src = ‘http://qqmmsh.oss-cn-hangzhou.aliyuncs.com/apply/6113528861282912.jpg’ image.onload = function()...
vue-cropper图片裁剪网络图片展示时跨域
meng2lin的博客
04-24 3788
在使用vue-cropper时，展示图片的时候出现跨域 报错如下： vue-cropper空白 解决方法： 将网络图片转为base64 // 将网络图片转换成base64格式 transBase64FromImage(image) { let canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height let ct
cropper 图片跨域
niki的博客
06-07 1287
需要在图片服务器，或者返回的请求头添加 Access-Control-Allow-Origin:*，或Access-Control-Allow-Origin:请求来源域名。照看代码发现，cropper.js里面对图片的引用路径做了判断，给img标签添加了 crossorigin="anonymous"（匿名跨域属性）。有一种简单快速的解决办法，就是直接去掉cropper.js里面跨域属性，因为默认情况下图片跨域也是可以显示的。上传图片到图片服务器，因为域名不同，多以会有跨域问题。
vue html2canvas 将html转图片时遇到的问题解决
最新发布
qingrunhao的博客
06-27 273
将富文本内容渲染出来，推荐做法是将提交按钮改为预览按钮，然后在另外的弹框中渲染出富文本内容，如图formData.details是富文本中的内容。场景为将富文本组件tinymce里的html内容转为图片，出现的问题是vue获取不到tinymce元素，无法直接使用html2canvas。经测试，没有该属性也是可以的。注意：VUE记得安装html2canvas，npm install html2canvas -save。将富文本的html转为图片后，富文本中的图片缺失（主要是跨域引起）3. 后端跨域配置；
vue-cropper，展示oss图片出现跨域问题解决
单眼皮的小熊
12-03 2933
<vue-cropper ref="cropper" id="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop" :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox" @re.
OSS配置跨域访问
热门推荐
qq_45376215的博客
08-09 1万+
阿里云OSS设置跨域访问 如果没有配置，网页控制台会报（如果出现以下错误): Access to XMLHttpRequest at 'https://xxx-assets.oss-cn-hangzhou.aliyuncs.com/ ’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Orig...
【AndroidX】Activity Result API使用示例
Taozi825232603的博客
10-25 1839
参考官方链接：获取Activity的结果 implementation 'androidx.activity:activity:1.2.0-beta01' implementation 'androidx.fragment:fragment:1.3.0-beta01' 本示例演示了从系统相册中获取图片uri并进行显示的功能。 Activity文件： public class MainActivity extends AppCompatActivity { public
vueCropper图片跨域导致图片不回显
weixin_70075469的博客
01-23 1448
控制台报错 图片回显出错 可能是跨域。
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
04-29
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
vue-cropper 使用demo。 基于 vue3，实现 旋转，缩放，控制裁剪，选择阈值，上传图片等功能。
03-18
使用 vue-cropper + vue3 + typescript + element-plus 1. 主要组件 vue-cropper 2. ui组件基于element-plus 3. 开发框架 基于vue 3.2
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
写在前面 小记，就简单写了 。问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑vue.config.js，如下： let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pathRewrite:{ '^/':'' } }; module.exp
基于vue的图片裁剪插件vueimagecropper
08-10
一个vue的图片裁剪组件，实现了缩放裁剪，自定义裁剪尺寸，以及iphone和部分安卓机型的照片角度纠正
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
vue-cropper解决图片跨域问题
m0_50884973的博客
10-26 3383
近期加入了一个学校某团队一起做项目，被一个前端问题卡了好一会，浅浅记录一下。看到Access to…立马反应到是跨域问题，没想到图片也有跨域问题（课业都是关于后端学习，前端并不是很熟悉） 解决方案：在js中的edit函数下将图片格式转为base4即可。
vue-cropper的使用和图片跨域问题
Zhou1Monster的博客
10-29 3037
vue-croppervue-cropper的使用图片跨域问题 vue-cropper的使用 链接: 文档. 链接: 实例. 安装npm install vue-cropper 简单的示例： // 组件内使用 <template> <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :autoCrop="option.auto
前端解决图片跨域问题vue-cropper组件“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin“
AMichaelShi的博客
07-15 2315
直接上问题 vue-cropper解决图片跨域问题 遇到这个问题主要是跨域请求, 一般情况下用js把图片转base64传输就能解决 // 设置头像base64 setAvatarBase64(src, callback) { let _this = this; let image = new Image(); // 处理缓存 image.src = src + '?v=' + Math.random(); // 支持跨域图片
图片裁剪工具vueCropper跨域解决
三俩句的博客
01-30 2582
图片裁剪工具vueCropper跨域解决 1.报错原因：本项目的图片放在亚马逊，需求是直接拿到网络图片进行裁剪 2.解决：将图片转化成base64 Vue.prototype.getBase64Img = function(params) { if (params && params.url) { var that = this; var image = new Image(); image.s
nginx图片服务器 使用 vue-cropper 出现跨域问题
qq_40295647的博客
04-02 691
nginx图片服务器 使用 vue-cropper 出现跨域问题 ​ 在一个使用nginx图片服务器的项目中使用vue-cropper裁剪图片，发现图片上传以后再次点裁剪开会出现跨域问题。网上搜索各种方法，发现全是全是oss跨域问题，要不就是把图片转换成base64格式，各种尝试后还是会出现跨域问题,百思不得其姐. ​ 解决方法： ​ 在配置nginx的时候加上： add_header Access-Control-Allow-Origin *; a
vue-cropper 渲染图片跨域失败
08-09
当使用vue-cropper渲染图片时，如果出现跨域失败的情况，可能是由于以下原因导致的： 1. 图片资源的服务器没有正确设置跨域响应头。在使用vue-cropper加载图片时，如果图片资源来自不同的域名，浏览器就会根据同源策略拒绝此次请求。解决办法是在服务器的响应头中添加Access-Control-Allow-Origin字段，并设置为允许访问的域名。 2. 图片资源服务器开启了防盗链功能。有些服务器会对请求的Referer进行判断，如果请求的Referer不在其白名单内，就会返回403 Forbidden错误。可以通过设置Referer字段或者和图片资源服务器的管理员协商解决此问题。 3. 使用了代理服务器。在开发环境中，如果使用了代理服务器来转发请求，可能会导致跨域失败。此时需要在代理服务器的配置中设置允许跨域访问。 综上所述，当vue-cropper渲染图片出现跨域失败时，一般是因为服务器没有正确设置跨域响应头、开启了防盗链功能或使用了代理服务器等原因导致的。可以通过相应的解决办法来解决此问题。
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值