当前位置：首页 > article >正文

【VUE】a链接下载跨域文件直接打开而非下载（解决办法）

article 2025/1/8 7:24:30

背景：a链接下载`跨域`文件时，浏览器默认会打开文件，而非直接下载

<a :href="url" :download="fileName">下载</a>

data() {
    return {
    	url: 'http://xxxxx.mp4',
    	fileName: 'xxxxx.mp4'
    }
}

解决方式

服务器设置HTTP请求头为Content-Disposition 为 attachment即可，访问的时候就是直接下载而不
是浏览!

注：这里需要添加download参数来区分，这样同一地址可根据参数选择要直接打开还是直接下载

<a :href="`${url}?download=1`" :download="fileName">下载</a>

在nginx.conf配置文件中配置以下内容

location / {
	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Headers' '*';
	add_header 'Access-Control-Allow-Methods' '*';
	
	# OPTIONS 直接返回204
	if ($request_method = 'OPTIONS') {
		return 204;
	}
	# 仅允许 GET|POST|HEAD
	if ($request_method !~* GET|POST|HEAD) {
		return 405;
	}

	# URL?download=1 附件下载
	if ($arg_download) {
		add_header 'Content-Disposition' 'attachment';
	}

	try_files $uri $uri/ =404;
}