laravel8+quasar2+a标签 跨域下载视频文件
laravel8+quasar+a 标签 不配置跨域，用文件流的方式下载
- 1.过程
-
- 在此感谢各位大佬，搜索的是在太多了，落下谁的话请见谅
- 2.【最终方案！】laravel返回blob类型的文档流，使用a标签跨域下载
- 3.【备忘用】apache 配置代理
- 4.【备忘用】quasar 配置代理，仅开发环境使用
1.过程
为了实现跨域下载视频，经历很多。。。
- 首先，quasar（版本2.6.1）：quasar.config.js的devServer中添加代理，设置跨域访问，好用但发现只能开发环境使用（打包前好用，打包后不好用）方法也放下边了
- 然后，在网上一顿搜，找到用apache配置代理的方法，当然还有nginx配置代理什么的，我直接用的apache，好用，但客户那边由于某些原因，不允许配置。方法也放下边了，留作备忘
- 最后！如果能返回文件流，再下载，不就不存在跨域的问题了么！又经过一顿搜索，终于弄出来了
在此感谢各位大佬，搜索的是在太多了，落下谁的话请见谅
- 【文档流下载——axios+fetch两种方式下载】https://blog.csdn.net/yehaocheng520/article/details/127771893
- 【前端下载文件方法分享】https://blog.csdn.net/YX0711/article/details/126801895
- 【用apache代理解决ajax跨域问题】https://blog.csdn.net/weixin_30838873/article/details/94876951?spm=1001.2014.3001.5506
2.【最终方案！】laravel返回blob类型的文档流，使用a标签跨域下载
后台
使用laravel自带的download方法，返回文件流
官方文档：https://learnku.com/docs/laravel/10.x/filesystem/14865#5dfd5a
Route::get('fncVideoDownload', function () {
return Storage::disk('sftp')->download('upload/video/123.mp4');
});
或者
Route::get('fncVideoDownload', function () {
return response()->stream(function () {
//echo file_get_contents("http://123.456.7.89/upload/video/uploadr/bbb.jpeg");// image/jpeg
echo file_get_contents("http://123.456.7.89/upload/video/aaa.mp4");// video/mp4
}, 200, ['Content-Type' => 'video/mp4']);
});
前台
<template>
<a
id="fileDownload"
href=""
download=""
target="_blank"
style="display: none"
></a>
</template>
<script lang="ts">
function download(){
//创建的a标签
const link = document.getElementById('fileDownload')
if (link) {
//想传到后台的参数
const params = {
aa: 'aaaa',
}
//interfaceUrl:路由URI
let responsedata: Blob = await axios.get(
'interfaceUrl',
{
params,
//必须写
responseType: 'blob',
}
)
const blobUrl = window.URL.createObjectURL(responsedata)
link.setAttribute('href', blobUrl)
link.setAttribute('download', 'newname.mp4')
link.click()
window.URL.revokeObjectURL(blobUrl)
}
}
</script>
3.【备忘用】apache 配置代理
/usr/local/etc/apache24/httpd.conf中下边四个解开
LoadModule proxy_module libexec/apache24/mod_proxy.so
LoadModule proxy_connect_module libexec/apache24/mod_proxy_connect.so
LoadModule proxy_ftp_module libexec/apache24/mod_proxy_ftp.so
LoadModule proxy_http_module libexec/apache24/mod_proxy_http.so
再添加：
proxypass /videodownload http://123.456.7.89
proxypass /videodownload http://123.456.7.89/upload/video 这种直接给文件夹带上也行
重启apache即可
4.【备忘用】quasar 配置代理，仅开发环境使用
quasar.config.js（文件在根目录中）的devServer中添加代理，设置跨域访问
代码复制↓
proxy:{
//随便起的名字
'/videodownload': {
// 目标地址
target: 'http://123.456.7.89',
// 跨域访问设置，true代表跨域
changeOrigin: true,
//前缀删除
rewrite: path => path.replace(/^\/videodownload/, '')
}
}
开发前先直接在浏览器输入地址看看视频存不存在
下载方法有两个，此处都记录下来，都好用
//===== method 1 ========================
var x = new XMLHttpRequest()
x.open('GET', '/videodownload/upload/video/123.mp4', true)
x.responseType = 'blob'
x.onload = function (e) {
const url = window.URL.createObjectURL(x.response)
link.setAttribute('href', url)
link.setAttribute('download', 'newname.mp4')
link.click()
}
x.send()
//===== method 2 ========================
let blob = await fetch('/videodownload/upload/video/123.mp4').then((r) => r.blob())
const blobUrl = window.URL.createObjectURL(blob)
link.setAttribute('href', blobUrl)
link.setAttribute('download', 'newname.mp4')
link.click()
window.URL.revokeObjectURL(blobUrl)