laravel8+quasar2+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)