基于阿里云 OSS 下载图片跨域问题

问题描述：我们通过 URL 图片连接下载图片至本地，产生图片请求异常：No 'Access-Control-Allow-Origin' header is present on the requested resource。

我们通过 XMLHttpRequest 加载外部图片文件

// 图片下载
download (row) {const $that = thisconst imgUrl = row.fileUrllet xhr = new XMLHttpRequest()xhr.open('get', imgUrl, true)// 至关重要xhr.responseType = 'blob'xhr.onload = function () {if (this.status === 200) {// 得到一个blob对象let blob = this.response//  至关重要$that.downloadFile(row.fileName, blob)}}xhr.send()
},

将结果返回结果放入 <a> 标签中，进行下载。

// 下载
downloadFile (fileName, blob) {var dowloadElement = document.createElement('a')var href = window.URL.createObjectURL(blob)let evt = document.createEvent('HTMLEvents')dowloadElement.href = hrefdowloadElement.download = fileNamedocument.body.appendChild(dowloadElement)evt.initEvent('click', true, true)dowloadElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))document.body.removeChild(dowloadElement)window.URL.revokeObjectURL(href)
},

此时出现图片链接出现 403 禁止访问的问题，但是通过链接，可以在浏览器中查看访问都没有问题。

首先想到的是不再是通过 XMLHttpRequest 进行加载图片，而是通过 <a>、<image> 标签在浏览器中可以无视同源策略。

在 <a> 标签中，配置 download 的属性时，图片链接直接在浏览器中打开了，因此仅适用于同源的 URL。

解决方案：先创建一个图片，然后用 canvas 绘制该图片，然后使用 canvas.toDataURL 获得，代码如下：

async download (row) {let image = new Image()image.setAttribute('crossOrigin', 'anonymous')image.src = row.fileUrlimage.onload = () => {let canvas = document.createElement('canvas')  canvas.width = image.width   canvas.height = image.height   let ctx = canvas.getContext('2d')ctx.drawImage(image, 0, 0, image.width, image.height)let ext = image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase()let dataURL = canvas.toDataURL(ext)this.downloadFile(dataURL, row.fileName)}
},

代码中有设置图片的 crossOrigin 属性 image.setAttribute('crossOrigin', 'anonymous')。因为图片跨域，canvas的toDataURL会报错拿不到结果。

将通过 canvas 制作的图片链接，放入到 <a> 标签中进行下载。

download (href, name = 'pic') {let eleLink = document.createElement('a')eleLink.download = nameeleLink.href = hrefeleLink.click()eleLink.remove()
}

此时产生了新的问题：就是有些图片可以下载下来，有些图片同样会产生 403 禁止访问的问题。找了很久这个问题的产生，初步估计是上传图片的时间在当前上传的就可以下载，而非当天上传的图片，下载就产生了403 禁止访问的问题。通过查看阿里云 OSS 下载文件，通过文件 URL 下载文件，浏览器中使用 signatureUrl 方法生成用于下载的文件 URL，URL的有效期默认为半小时，即 1800s。

调用接口，获取下载文件配置信息，代码如下：

import Aliyun from '../../config/aliyun/aliyunConfig'
async getData (row) {   const { data } = await common.getSecurityToken()   const { accessKeyId, accessKeySecret, securityToken } = data     return new Aliyun().configDownload({   AWconfig: {   aliyunConfig: {  // AWconfig为阿里云图片地址配置url: 'xxx',endpoint: 'xxx',bucket: 'xxx',},},token: { accessKeyId, accessKeySecret, securityToken },name: row.fileName,   url: row.fileId})
},

将处理过后的 URL 链接放入 image 中，代码如下：

// 图片下载
async download (row) {const result = await this.getData(row)image.src = result...
},

那么我们如何配置 Aliyun 类中的 configDownload 方法呢？

export default class Aliyun {// 配置下载功能configDownload (obj) {this.validate(obj)  // 检验参数let { accessKeyId, accessKeySecret, securityToken } = this.getParams(obj) // 处理参数var aliyunConfig = obj.AWconfig.aliyunConfigvar client = new OSS.Wrapper({accessKeyId,   accessKeySecret,   stsToken: securityToken,   endpoint: aliyunConfig.endpoint,   bucket: aliyunConfig.bucket})   const filename = obj.name // filename为自定义下载后的文件名。const response = {   'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`}// object-key表示从OSS下载文件时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。return client.signatureUrl(obj.url, { response });}
}

这里需要注意的是，传入的 URL 地址并非完整路径；传入的是包含文件后缀在内的完整路径。

基于阿里云 OSS 下载图片跨域问题相关推荐

阿里云oss对象存储跨域设置
依次进入: 1. 对象存储oss 2. Bucket 列表 3. 找到要设置的Bucket 4. 权限管理-跨域设置 5. 设置 6. 创建规则来源: * 允许 Methods: POST GET ...
最详细PicGo(图床)加阿里云OSS实现图片自动上传
最详细PicGo加阿里云OSS实现图片自动上传前言使用Typora这款markdown编辑器时,导入的图片是本地链接,在进行资源共享时,就会出现图片无法显示问题,为了将相对路径转为绝对路径,就必须 ...
Typora + Picgo + 阿里云oss实现图片上传
Typora + Picgo + 阿里云oss实现图片上传设置原因 Typora是一款markdown文本编辑器,无法承载本地图片存储的功能,书写好的文章上传到博客或其他设备上时会导致图片丢失,无法 ...
【案例】“1GB1年1毛钱“——使用 Backup exec 基于阿里云OSS 实现企业数据异地备份【服务器管理】【云备份】
[案例]"1GB1年1毛钱"--使用 Backup exec 基于阿里云OSS 实现企业数据异地备份 [服务器管理][云备份] 1.使用环境如图所示资源配置备注 File ...
使用阿里云OSS实现图片上传案例
文章目录前言一.OSS是什么? 二.使用步骤 1.开通OSS服务 2.创建bucket 3.创建子账户 4.查看帮助文档,编写后端代码 5.layui前端总结前言在正式的开发环境中,类似图片 ...
小程序配置阿里云OSS下载文件，在请求头里配置生成强制下载链接，（拿到下载链接可以下载文件至本地）
小程序配置阿里云OSS下载文件,在请求头里配置生成强制下载链接,(拿到下载链接可以下载文件至本地)(Win10电脑开发环境)**这里只说明小程序端问题**<菜鸡总结大神勿喷!蟹蟹~> 大体 ...
Typora+PicGo+阿里云OSS实现图片上传功能
烦恼 Typora是最好用的markdown语法的工具之一:平时做笔记都是使用这个工具,免费,简洁好用,用上之后就爱上了.但是它默认图片是放在本地的.为了用好这个工具,也是经历了一打怪之旅. 开始不做 ...
七牛云和阿里云OSS存储图片服务器使用
目录 1 图片存储方案 1.1 介绍 1.2 七牛云存储 1.2.1 注册.登录 1.2.2 新建存储空间 1.2.3 查看存储空间信息 1.2.4 开发者中心 1.2.5 鉴权 1.2.6 Java ...
Java调用阿里云OSS下载文件
1.准备工作具体细节参考Java调用阿里云oss_迷途知返-的博客-CSDN博客_java使用阿里云oss. 2.项目需求我这里只需要根据文件名称把文件从oss下载下来即可,参考阿里云官网指导:下 ...
阿里云 OSS 之图片处理
OSS Object Storage Service: 海量.安全.低成本.高可靠的云存储服务. 图片处理服务阿里云 OSS 图片处理服务 (Image Processing,简称 IMG), 将原 ...

基于阿里云 OSS 下载图片跨域问题

基于阿里云 OSS 下载图片跨域问题相关推荐

最新文章

热门文章