vue 下载图片时候获取不到 Content-Disposition

452 阅读1分钟

直接放在浏览器里访问会看到Content-Disposition 但是使用axios获取数据时候header里没有Content-Disposition字段

原因:

默认情况下,header 只有7种 simple response headers (简单响应首部)可以暴露给外部:

名称
Cache-Control通用消息头字段,被用于在http请求和响应中,通过指定指令来实现缓存机制
Content-Language说明访问者希望采用的语言或语言组合,这样的话用户就可以根据自己偏好的语言来定制不同的内容
Content-Length指明发送给接收方的消息主体的大小,即用十进制数字表示的八位元组的数目
Content-Type告诉客户端实际返回的内容的内容类型
Expires响应头包含日期/时间, 即在此时候之后,响应过期
Last-Modified包含源头服务器认定的资源做出修改的日期及时间
PragmaHTTP/1.0 中规定的通用首部,用来向后兼容只支持 HTTP/1.0 协议的缓存服务器
解决办法

需要服务端将Content-Disposition 字段暴露出来 默认

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition") 
response.setHeader("Content-Disposition", ...)

在使用阿里云oss服务的时候也发现该问题

解决办法:

  • 登录oss后台

  • 选择数据安全>跨域设置,然后单击创建规则

  • 创建跨域规则面板,设置跨域访问参数:

  • 来源设置为*

  • 依次选择允许Methods的全部选项,即GETPUTDELETEPOSTHEAD

  • 允许Headers设置为*

  • 暴露Headers设置为Content-Disposition

参照 阿里云使用说明