图片转base64跨域以及阿里云OSS跨域规则配置后不生效的原因

最新推荐文章于 2024-05-28 13:11:40 发布
最新推荐文章于 2024-05-28 13:11:40 发布
阅读量4.9k 收藏 1
点赞数
分类专栏： 日常踩坑 文章标签： 图片转base64跨域 阿里云OSS跨域规则配置后不生效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmyh100/article/details/82853728
版权

场景：公司使用OSS存储图片等静态资源，我获取图片资源并且将它转为base64的时候发生了跨域问题

于是到OSS进行配置

 

但是仍然报了跨域问题

最后发现，因为启用了CDN缓存，所以得到CDN处添加HTTP头 Access-Control-Allow-Origin 参数的取值为 * （表示全部域名）


 

感谢qianghong000的分享，详细问题分析可以看这里：http://blog.51cto.com/qiangsh/2089991

cmyh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里云oss图片上传.zip
04-01
阿里云OSS（Object Storage Service）是阿里云提供的一个高可用、高可靠、低成本的云存储服务，专门用于存储各种类型的数据对象，如图片、视频、文档等。它支持丰富的数据处理能力，如图片处理、转码、水印等，广泛...
阿里云OSS跨域规则配置后不生效的原因
qianghong000的博客
03-22 593
OSS跨域资源共享(CORS)配置项详解：https://help.aliyun.com/document_detail/44199.html -------------------------------------------------------------------------------------------------------------------------------...
oss图片跨域问题， 下载oss图片到本地转为 base64
weixin_49523082的博客
08-22 879
oss图片跨域问题， 下载oss图片到本地转为 base64
H5、小程序引用OSS图片资源跨越解决
最新发布
weixin_44554055的博客
05-28 348
什么是跨域及CORS配置详见百度，而图片来源位于阿里云OSS，而OSS在之前已经确认跨越配置正常无误，CDN加速并没有启用故此PASS。到此基本可以确定是浏览器缓存引起的。因为第一次访问时浏览器缓存中并没有存在，第一次存在CORS配置，但是浏览器缓存后并不会保留图片的配置，故而第二次去请求时缓存中存在但是并没有CORS配置内容所以引起了。在引用链接地址后面拼接上参数url=url?xxxx,如下所示（建议参数使用时间戳，防止重复）资源路径在线引用报错提示。
图片转成base64 跨域等安全限制及解决方案
weixin_30659829的博客
10-27 794
把其他域的图片在canvas中转换为base64时，会遇到跨域安全限制。 目前，唯一可行的方案是，把图片文件以arraybuffer的形式ajax下载下来，然后直接转base4。 但是，这样有个毛病，就是可能会浪费带宽，多下载一次。 /* var getBase64ByUrl = function(src, callback, outputFormat) { ...
网络图片转换为base64，解决跨域问题
weixin_41700532的博客
10-22 9442
function convertImgToBase64(url, callback, outputFormat) { var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'...
文件上传阿里云跨域问题
weixin_44738158的博客
11-07 619
Access-Control-Allow-Origin
解决获取 OSS 文件出现跨域问题
毒牙
12-21 4062
在最近的需求中有需要获取 OSS 的图片转为 base64 的需求，在需求刚开始使用 XHR 发送资源请求，发现出现了跨域，点了几次有能够正常访问了，但是认为可能是 OSS 权限需要配置然后配置了一下。但是还是出现这样的问题，问题根本没有解决，后面在发送获取图片请求的头部加上 Cache-Control: no-cache 之后问题解决了，再也没有出现跨域了。 附上代码: const getOSSBlobResource = (url: string): Promise<Blob> =>
React实现阿里云OSS上传文件的示例
10-14
主要介绍了React实现阿里云OSS上传文件的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
javascript使用链接跨域下载图片
12-13
总的来说，跨域下载图片的关键在于利用`crossOrigin`属性进行跨域设置，以及使用Canvas和Base64编码来绕过浏览器的安全限制。这种方法在处理外部图片资源时非常有用，但请注意，服务器必须配置正确的响应头才能允许...
Javascript将图片的绝对路径转换为base64编码的方法
10-18
在JavaScript中，将图片的绝对路径转换为base64编码主要涉及到HTML5的Canvas API以及数据URL的概念。这个过程对于在网络环境中传输图像数据或者避免HTTP请求有其独特的优点，因为base64编码后的字符串可以直接嵌入到...
阿里云OSS运维基础实战手册
03-17
内容包含：OSS核心必备概念（OSS五个核心优势、API调配全掌握、6个基础名词带你入门OSS、实操前须知的10项使用限制、5个场景全面了解跨域配置）、OSS典型解决方案与经典案例（低价高效，OSS如何处理视频、动静分离...
静态资源转base64， 解决图片跨域
weixin_45445453的博客
08-22 436
静态资源转base64， 解决图片跨域。
阿里云OSS设置了跨域 * 号,仍旧跨域问题
weixin_45945615的博客
05-20 672
阿里云不支持*匹配域名, 单个设置即可
已解决：前端直传阿里oss报错跨域问题，“No ‘Access-Control-Allow-Origin‘”，这个错误基本就是在阿里的开放平台没做规则配置（附我封装的上传源码）
Spy003的博客
04-29 9266
就直接上阿里oss管理后台去增加一个跨域规则：见图片，特详细配置成这样点确定就好了，就这么简单。
转base64 出现跨域的 问题
qq_42341025的博客
01-28 4009
封装的方法 如下 在网上找到一个解答， 如下： 现在 在我封装的 转base64 的方法中，已经给img添加了 crossOrigin 属性，但还是有问题存在， 待解决... 已解决，原因： 这个图片是经过百度出来的一个地址， 现根据该地址找到原网址，多次尝试该网址里的其他照片， 将本地图片放上 该网址 同样无法进行转base64， 得出： 该网站的 图片可以通过 img...
oss图片转base64 遇到的小坑
qq_44650751的博客
07-06 944
需求：项目环境是内网，导致放在oss里的图片访问不了，所以需要后端把图片的base64格式传给前端。前端对图片的处理，一般都用dataURL的方式 Data URL 由四部分组成：data，文件类型，base64标志位，base64数据。 后端 添加了完整的格式：前端就能处理了base64就是64个可打印的字符来标识8位的二进制数据的编码。 由于64等于2的6次方，所以一个Base64字符实际上代表着6个二进制位(bit)。 然而，二进制数据1个字节(byte)对应的是8比特(bit)，因此，3字节（3
前端实现图片转Base64
weixin_63537474的博客
10-07 2829
但是，一般我们在做这样的需求前，处理的图片肯定不止一张，接下来就要批量处理，但是这个方法是异步，我们要将一个数组内的每个对象的地址都转成base64,才算真正完成我们的功能。前端一般接收到后端的数据一般是这种格式。最后我们将图片使用img标签正常渲染就好了，小知识：浏览器在识别同一个一模一样的图片地址，浏览器只会请求一遍该图片资源哦。打印一下看结果发现我们的图片地址已经变成了base64编码。废话不多说，直接上代码。
阿里云oss设置图片跨域
05-25
要在阿里云 OSS 中设置图片跨域，您需要按照以下步骤进行操作： 1. 登录阿里云 OSS 控制台，选择需要设置跨域的 Bucket。 2. 在 Bucket 概览页面中，单击“管理”按钮，进入 Bucket 管理页面。 3. 在左侧导航栏中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值