laravel8+quasar+a 标签 不配置跨域,用文件流的方式下载
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)