uni-app+unicloud使用uni.canvasToTempFilePath报跨域问题

uni-app+unicloud使用uni.canvasToTempFilePath报跨域问题

我的业务是使用了canvas，画完之后使用uni.canvasToTempFilePath的时候，报错：errMsg:canvasToTempFilePath:fail SecurityError: The operation is insecure

unicloud控制台已经设置了允许跨域域名为*

我在内置浏览器访问没有问题，在chrome无痕模式不行，手机访问也不行。但是如果我在chrome上停用缓存，就正常了。

文档有这么一句话：“访问云存储文件时，如果客户端存在缓存，可能会出现已配置跨域域名的情况下仍然跨域的问题。建议这种场景下在请求头内加上{“cache-control”: “no-cache”,“pragma”: “no-cache”}”

那我现在使用uni.canvasToTempFilePath的时候怎么改请求头？

img


更多关于uni-app+unicloud使用uni.canvasToTempFilePath报跨域问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

跪谢帮我找到问题的原因。
顺便解答下关于你的问题，将图片画到canvas的时候链接上带上个随机字符串即可。

更多关于uni-app+unicloud使用uni.canvasToTempFilePath报跨域问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大佬，请问具体怎么解决了。也在搞这个问题

回复 JoeX: 如果资源托管在unicloud，需要在 unicloud 后台配置跨域域名 * ；downloadFile 的时候在资源后面加个随机字符串规避缓存。

回复 t***@outlook.com: 谢谢大佬。已经解决了

在使用 uni.canvasToTempFilePath 时，如果遇到跨域问题，通常是因为 Canvas 中绘制的图片或资源来自不同的域名，而浏览器或平台的安全策略限制了跨域资源的访问。以下是解决跨域问题的几种常见方法：

1. 使用同域资源

确保 Canvas 中使用的图片或其他资源与当前页面在同一个域名下。这样可以避免跨域问题。

2. 设置跨域属性

如果必须使用跨域资源，可以在加载图片时设置 crossOrigin 属性，并确保服务器允许跨域访问。

const img = new Image();
img.crossOrigin = 'anonymous'; // 设置跨域属性
img.src = 'https://example.com/path/to/image.jpg';
img.onload = () => {
    // 图片加载完成后绘制到 Canvas
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.drawImage(img, 0, 0);
    ctx.draw();
};

3. 服务器配置 CORS

确保图片资源所在的服务器配置了正确的 CORS（跨域资源共享）策略，允许你的域名访问资源。服务器可以通过设置响应头来允许跨域访问：

Access-Control-Allow-Origin: *

或者更具体地指定允许的域名：

Access-Control-Allow-Origin: https://your-domain.com

4. 使用代理服务器

如果无法修改服务器配置，可以考虑使用代理服务器来获取跨域资源。代理服务器可以请求跨域资源并将其返回给客户端，从而避免跨域问题。

5. 使用 Base64 编码

将图片转换为 Base64 编码的字符串，然后直接使用 Base64 字符串绘制到 Canvas 上。这样可以避免跨域问题。

const img = new Image();
img.src = 'data:image/png;base64,...'; // Base64 编码的图片
img.onload = () => {
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.drawImage(img, 0, 0);
    ctx.draw();
};

6. 使用 uni.downloadFile

如果图片资源需要从网络下载，可以使用 uni.downloadFile 方法先将图片下载到本地，然后再绘制到 Canvas 上。

uni.downloadFile({
    url: 'https://example.com/path/to/image.jpg',
    success: (res) => {
        if (res.statusCode === 200) {
            const img = new Image();
            img.src = res.tempFilePath;
            img.onload = () => {
                const ctx = uni.createCanvasContext('myCanvas');
                ctx.drawImage(img, 0, 0);
                ctx.draw();
            };
        }
    }
});
回到顶部