1.背景介绍
下载的资源是阿里云对象存储,后台将资源链接签名后返回给前端,类似下面的链接(隐去了域名,并且有有效时间,不可访问)
http://xxxxxx/book%2Foffline%2Fzip%2F2%2FISBN9787550245174_%E4%B8%80%E8%B5%B7%E6%9D%A5%E4%BC%A0%E8%AF%9D.zip?Expires=1565867136&OSSAccessKeyId=LTAIj9HegdJpycfI&Signature=9%2BmWUxAaGUZDq3CzMcsFcV4V7nQ%3D
理论上前端只需要将其包裹在<a>
标签内部即可
<a :href='url' ></a>
但实践后发现默认下载的文件名包含阿里云OSS的虚拟路径,如果需求对这个名字不敏感,这个问题可以忽略,但公司要求不能包含虚拟路径
2.问题原因
下载时,部分下载文件路劲被转码,转码前浏览器找到最后一个/
并认为之后的所有字符串(截止到参数?
)是文件名即book%2Foffline%2Fzip%2F2%2FISBN9787550245174_%E4%B8%80%E8%B5%B7%E6%9D%A5%E4%BC%A0%E8%AF%9D.zip
,转码后book/offline/zip/2/ISBN9787550245174_一起来传话.zip
所以首先想到,在前端将URL
转码,使用decodeURIComponent
(注意与decodeURI
的区别)
实践后,点击测试,貌似解决了问题,但测试小姐姐说,随机会出现下载签名失效的问题,起初怀疑后台签名出问题,但给出的回复是这是批量签名,不会某一个失败,所以还是要找原因
观察截图的签名,中间出现了空格,实际上这是不可能的,所以确定是转码弄出的问题
现在问题就是,资源路径需要解码,而签名信息需要编码
所以最终解决办法是在前端将前部分资源路径解码,而保持后部分签名信息不变
http://xxxxxx/book/offline/zip/2/ISBN9787550245174_一起来传话.zip?Expires=1565867136&OSSAccessKeyId=LTAIj9HegdJpycfI&Signature=9%2BmWUxAaGUZDq3CzMcsFcV4V7nQ%3D
代码如下(全局filter
)
const ossurl=function(url){
let index = url.indexOf("?")
if (index != -1) {
let sig = url.slice(index)
let urlexp = decodeURIComponent(url.slice(0, index))
return `${urlexp}${sig}`
}
return url
}
不知道这样处理是不是最佳实践,或者是其他错误导致现在的结果,希望有了解的朋友帮忙指出