蛋黄肉粽
蛋黄肉粽
  • 发布:2023-08-14 18:46
  • 更新:2023-08-15 16:16
  • 阅读:422

加载访问数据库图片url提示跨域,跨域域名已经添加了还是不行,这是怎么回事

分类:uniCloud

自己项目数据库里的图片都不让取,这是什么道理

2023-08-14 18:46 负责人:无 分享
已邀请:
昭昭L

昭昭L - 开心就好

和是不是自己数据库关系不大,主要看是否同源。你图片的使用场景能提供一下吗?提供代码片段,图片地址我来帮你复现一下看看

蛋黄肉粽

蛋黄肉粽 (作者)

前端网页托管和云数据库都在同一个云服务器上,怎么就不算同源呢。图片用在一个画布插件上的,
<view class="poster" v-if="!show_poster">
<lPainter :board="posterObj" ref="painter"></lPainter>
<view class="footer-btn">
<view class="" @click="toCopy">
复制网址
</view>
<view class="save" @click="toSave">
保存
</view>
</view>
上面是主程序
toSave() {
uni.showLoading({
title:'海报生成中',
})
const painter = this.$refs.painter;
painter.canvasToTempFilePath().then(res => {
this.path = res.tempFilePath;
this.$refs.posterImg.open();
this.show_poster=true;
uni.hideLoading()
});

上面是方法

canvasToTempFilePath(args = {}) {
const {use2dCanvas, canvasId} = this
return new Promise((resolve, reject) => {
let { top: y = 0, left: x = 0, width, height } = this.boundary || this
let destWidth = width this.dpr
let destHeight = height
this.dpr
// #ifdef MP-ALIPAY
width = width this.dpr
height = height
this.dpr
// #endif
const copyArgs = {
x,
y,
width,
height,
destWidth,
destHeight,
canvasId,
fileType: args.fileType || this.fileType,
quality: /\d/.test(args.quality) ? args.quality : this.quality,
success: resolve,
fail: reject
}
if (use2dCanvas) {
delete copyArgs.canvasId
copyArgs.canvas = this.canvas
}
uni.canvasToTempFilePath(copyArgs, this)
})

这画布组件里的方法

蛋黄肉粽

蛋黄肉粽 (作者)

无论在内置浏览器还是其他浏览器上运行都没有问题,但H5部署到服务器以后生成海报时会提示错误:errMsg:"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

蛋黄肉粽

蛋黄肉粽 (作者)

https://mp-1fa2fa47-4b9a-4946-a09e-126fce9df44c.cdn.bspapp.com/cloudstorage/39ba8070-aa97-47f0-8b58-bfb4d5be0b27.webp,所有问题都在这张图片上,只要有这张图片就会弹出错误"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

问题是这是一张从项目自带数据库里get的一张图片地址么,而且https://mp-1fa2fa47-4b9a-4946-a09e-126fce9df44c.cdn.bspapp.com这个域名也加了跨域白名单了,怎么就成了有毒了呢,这个问题不应该是bug么

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

先使用api下载图片在使用

  • 蛋黄肉粽 (作者)

    如果需要复用的图片下载也就罢了,都不用下载,直接方static里好了。但有些即用即走的图片,比如用户头像,这个下载就不对了,不可能每次都下载啊,这个怎么处理

    2023-08-15 09:28

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

不是那种下载,使用uni.downloadFile

蛋黄肉粽

蛋黄肉粽 (作者)

完美!居然解决了!多谢piaoyi_UI是大神的点拨! uni.downloadFile果然能够解决浏览器报canvas有毒的问题,但下载时依然会报跨越错误(这TM绝对是个bug,自己的在unicloud买的阿里云服务空间,取数据库里的图片居然会报跨域,并且是在已经将服务器域名设置为跨域白名单的情况下!)
重点来了~~~突然想到之前在网上搜到的一篇文章说在url后面加随机数可以解决跨域,于是在uni.downloadFile的url参数后面加了时间参数,居然真的不报跨域了,下载成功,canvas绘制成功!至于为什么加了随机数就不跨域了,鬼知道,反正是神操作!
以上两个步骤缺一不可,就此完美解决canvas绘制时(我用的是第三方插件)引用数据库图片跨域问题。再次感谢大神们!

要回复问题请先登录注册