OSS CDN使用html2canvas遇到跨域CORS设置

最新推荐文章于 2024-07-31 11:17:59 发布
最新推荐文章于 2024-07-31 11:17:59 发布
阅读量511 收藏
点赞数 2
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goofy543/article/details/137527312
版权
本文讲述了在使用HTML2Canvas截屏时，遇到Chrome中从阿里云OSS通过CDN加载的图片空白显示问题，原因是跨域CORS限制。作者详细介绍了如何在OSS和CDN上配置跨域资源共享(CORS)以解决此问题。
摘要由CSDN通过智能技术生成

网页图片保存在阿里云OSS+CDN，在使用html2canvas截图时遇到了Chrome图片空白不显示的问题，经查询是跨域CORS的问题，就需要在OSS和CDN配置跨域资源共享（CORS）

跨域访问是浏览器出于安全考虑而设置的一个限制，即同源策略，是用于隔离潜在恶意文件的关键安全机制。当A、B两个网站属于不同域时，来自于A网站页面中的JavaScript代码访问B网站时，浏览器会拒绝该访问。

OSS配置如下：

不过如果OSS挂了CDN，那么CDN上的配置会替代OSS，因此需要在CDN设置：

goofy543
关注
canvas绘制网络图片或阿里云oss图片存在跨域问题
fetch_all的博客
04-15 2993
使用canvas绘制oss图片时添加crossOrigin="Anonymous" 后控制台报错:has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Or...
html2canvas截图oss图片防跨域
weixin_68658847的博客
07-19 975
html2canvas截图oss图片防跨域
前端使用html2canvas在页面截图并导出，以及截图中含有图片时的跨域问题解决
最新发布
qq_54818343的博客
07-31 746
在你的Vue组件中，你应该将图片URL更改为通过代理访问的URL。注意，出于安全考虑，许多服务器默认不允许跨域请求。
html2canvas 请求阿里云oss图片跨域问题解决
xinbear的博客
03-27 856
1. html2canvas设置 useCORS:true。2. 阿里云oss允许跨域。
html2Canvas图片跨域问题（OSS）
T追梦人的博客
07-23 920
html2Canvas图片跨域问题（OSS）
html2canvas图片跨域问题
qq_38902230的博客
04-28 5650
针对html2canvas图片跨域问题处理 根据html2canvas文档说明，图片跨域只需配置 useCORS：true即可解决跨域问题： 但是，经过百般尝试，加了这个还是不行，就衍生出很多转成base64来绘制图片，一旦图片大，网络慢，极容易出现图片丢失问题。最终还是找到以下方案解决，直接上代码： <div class='saveImg'> <img :src="bgurl" alt="" crossorigin="anonymous"/> </div> htm
解决阿里oss远程图片html2canvas生成海报时跨域问题（附代码）
vxiaojin的博客
01-14 4346
html2canvas生成海报的代码网上有很多，文章里不做详述，此文章主要解决阿里oss远程图片html2canvas生成海报时跨域问题 一、问题： 如果生成海报的图片存在远程图片，那么js报错如下： Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may ...
it618视频直播学院 OSS私有后CDN回源加速与鉴权访问的设置方法1
08-08
同时，为了视频播放的顺利进行，必须在CDN域名管理中设置跨域策略，允许指定来源的请求访问。 最后，CDN域名需要配置CNAME记录，将CDN二级域名指向OSS，否则会提示需要设置CNAME。完成这一步后，插件设置就大功告成...
oss图片跨域问题_OSS跨域资源共享(CORS)错误及排除-阿里云开发者社区
weixin_39669075的博客
12-22 1330
介绍跨域资源共享(Cross-Origin Resource Sharing， CORS)，介绍及配置请参看 跨域资源共享使用指南 。配置项CORS配置有以下几项：来源(AllowedOrigin)：允许跨域请求的来源，可以同时指定多个。配置时需带上完整的域信息，例如http://10.100.100.100:8001或https://www.aliyun.com。注意， 不要遗漏了协议名htt...
html2canvas跨域问题的坑
qq_35685018的博客
03-20 2150
html2canvas跨域问题
html2canvas js文件 和java如何设置代理解决跨域问题
06-28
html2canvas js 框架 和 java设置代理解决图片跨域访问时不能生成图片的问题。 zip包含：设置代理使用跨域图片.docx，canvas2image.js，canvg.js，html2canvas.js，html2canvas.min.js，html2canvas.svg.min.js共6个文件
html2canvas.js
10-31
HTML转图片 html2canvas.js ，通过该js可以自定义截取dom节点下的html并转换为图片
前端html2canvas实现html转图片（浏览器截图）
09-21
附件中实现了通过html2canvas截图百度echart。解压即可运行
html2canvas将网页保存成图片
10-23
html2canvas将网页保存成图片：用法如下， html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); });
解决canvas绘制oss图片的跨域问题
起个类名好难的博客
04-14 3013
最近在做公司项目在线海报编辑的时候，tuDataUrl无法将图片转为图片进行预览，这个的原因网上有很多的解释以及解决办法，这里就不再细说。 但是按照网上的方法在前端js使用canvas绘制图片时添加crossOrigin=“Anonymous” ，画布canvas会在绘制oss上的图片时，报错has been blocked from loading by Cross-Origin Resourc...
使用html2canvas生成海报，阿里云oss图片或网络图片报跨域问题
qq_38839208的博客
05-18 1654
使用html2canvas生成海报，阿里云oss图片或网络图片报跨域问题 背景 项目中需要一个生成海报功能，因为图片是上传到了阿里云oss上面，所以导致html2canvas截图得时候，图片显示空白然后配置html2canvas日志功能 logging: false， 发现图片报了跨域问题，首先开启了html2canvas useCORS:true, 发现并没有什么用。 解决思路 解决问题搜索过程中发现一篇大佬的文章，说阿里云服务器配置允许跨域之后，还是不行得情况下，将浏览器disabled cache 勾
阿里云oss跨域设置
07-28
阿里云 OSS（Object Storage Service）是一种云存储服务，用于存储和访问大规模的非结构化数据。在使用阿里云 OSS 进行跨域资源请求时，我们可以通过以下步骤进行设置： 1. 登录阿里云管理控制台，找到所需设置的 OSS 存储空间。 2. 进入存储空间详细页面，在左侧导航栏中选择“基础设置”。 3. 在基础设置页面下方找到“跨域设置”选项，点击“添加跨域规则”按钮。 4. 在跨域规则设置页面，我们可以设置跨域请求的规则和限制条件。 - 可以选择设置规则的路径，例如允许所有路径（"/*"）或指定具体路径（"/images/*"）。 - 可以设置允许跨域请求的来源（域名或 IP 地址），以逗号分隔多个来源。 - 可以设置允许的 HTTP 请求方法，如 GET、PUT、POST 等。 - 还可以设置允许携带的自定义 HTTP Header，如 Authorization 等。 5. 完成跨域规则设置后，点击“确认”保存设置。 6. 设置成功后，可以在跨域设置页面中查看已添加的规则，并在需要的时候编辑或删除规则。 通过以上步骤，我们可以在阿里云 OSS 中设置跨域规则，使得指定来源的域名或 IP 地址可以跨域访问存储空间中的资源。这在构建一些跨域资源共享（CORS）的应用程序时非常有用，可以更灵活地处理客户端的请求需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值