静态资源地址&API字节流访问服务器文件区别及相互兼容方案

概述

访问文件资源，一般常见的有两种方式：

• 静态资源地址：https://www.baidu.com/aaa.png、https://www.baidu.com/video.mp4
• 接口获取文件流：https://www.baidu.com/api/png/aaa13

这两种方式一种是通过中间件进行http服务访问，一种是后端接口读取文件，然后以输出流响应给前端，但实际上得到的都是文件的字节流

特殊场景

但是在日常使用中

• 浏览器访问：无论是访问静态资源地址，还是接口获取流，都可以访问文件（不同浏览器表现不同，有的可以预览有的直接下载）；
• img标签：只能使用静态资源地址，使用流的API地址，会裂开，可以通过浏览器转成Blob对象，然后赋值src使用；
• videojs：只能使用静态资源地址，使用流的API地址，会提示“无法找到此视频兼容的源”，可以通过浏览器转成Blob对象，然后赋值，但是视频太大的时候对浏览器压力很大；
• ie的iframe：不支持Blob也不支持文件流预览，文件流会直接提示下载，ie只支持image、js、css之类的；

分析&猜测

但是两种访问方式都是得到文件的流，为啥两种方式使用的效果不一样呢，大致翻了很多资源，推断，个人推断是静态资源地址，最后面有文件扩展名，html标签处理时就可以知道流中的内容类型，然后渲染流内容。

解决

虽然只是推断，但是我尝试在流地址（https://www.baidu.com/api/png/aaa13）后面加上一个假的字符串（/video.mp4或/image.png），但后端接口对该path无任何处理。

• 于是得到了一个：https://www.baidu.com/api/png/aaa13/video.mp4访问原来的文件流API。

呵~ 结果您猜怎么怎么着，图片也能看了，视频也能播了，除了访问路径变了，任何数据处理都没改。

那就可以用这个手段欺骗浏览器，使API文件流也具有静态资源地址一样的作用和效果。