情况说明：
项目将文件储存在第三方服务器（阿里云）上，在下载文件的时候，需要跨域，将处理过程记录如下。
第一次尝试：（还不是跨域问题）
刚开始的时候，因为能获取到文件的URL地址，所以尝试以<a>标签的形式下载，代码如下：
// 下载按钮点击事件
fileDownload (url, fileName) {
let ele = document.createElement('a');
ele.download = fileName;
ele.href = url;
ele.style.display = 'none';
document.body.appendChild(ele);
ele.click();
document.body.removeChild(ele);
};
结果：虽然配置了download属性，但是因为url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开（可以手动下载）；不能打开的文件，会直接下载。
第二次尝试：（开始了）
既然download属性无效，干脆通过xhr请求获取文件，然后下载到本地，代码如下：
// 下载按钮点击事件
fileDownload() {
let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
let fileName = this.data.file_name;
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = (e) => {
const res = e.target.response;
this.saveAs(res, fileName);
};
xhr.send();
}
// 导出文件函数
saveAs (obj, fileName) {
let ele = document.createElement('a');
ele.download = fileName || '下载';
ele.href = URL.createObjectURL(obj); // 绑定a标签
ele.style.display = 'none';
document.body.appendChild(ele); // 兼容火狐浏览器
ele.click();
setTimeout(function () { // 延时释放
URL.revokeObjectURL(obj); // 用URL.revokeObjectURL()来释放这个object URL
document.body.removeChild(ele);// 兼容火狐浏览器
}, 100);
};
结果：文件可以直接下载，but为虾米有的文件可以下载、有的文件告诉我跨域问题？？？刷新页面之后，刚刚还可以下载的文件又不可以下载了！！！崩溃ing...联系运维的老哥尝试修改一下第三方服务器的参数，发现没有卵用，只能再尝试一下了。
第三次尝试：（jsonp）
既然是跨域的问题，网上的解决方案蛮多的，而且作为前端面试必考题，我背的也蛮熟的。首先使用jsonp来解决，步骤如下：
1.安装jsonp插件
npm install jsonp --save
2.在代码中使用jsonp
import jsonp from 'jsonp'; // 导入插件
// 下载按钮点击事件
fileDownload () {
let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
let fileName = this.data.file_name;
// 先测试一下能不能跨域成功
jsonp(url, null, (err, data) => {
if (err) {
console.error(err.message);
} else {
console.log(data);
}
})
}
结果：可能是哪里使用不对，反正是没有请求数据成功，还是显示跨域问题，既然不行，那就再换方法。
3.卸载jsonp插件
npm uninstall jsonp
第四次尝试：（fetch跨域）
废话不多说，直接上代码：
// 下载按钮点击事件
fileDownload () {
let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
let fileName = this.data.file_name;
// 先测试一下能不能跨域成功
let myHeaders = new Headers({
'Access-Control-Allow-Origin': '*',
'Content-Type': 'text/plain'
});
fetch(url, {
method:'GET',
headers:myHeaders,
mode:'cors'
}).then(res=>{
console.log(res);
});
}
结果：依然没有解决跨域的问题，革命尚未成功，老子还得努力啊。（ps: fetch的mode属性设置为’no-cors‘的时候能请求成功，但是返回值无法使用，木的办法）
第五次尝试：（使用插件downloadjs下载文件）
1.安装downloadjs插件
npm install downloadjs --save
2.使用downloadjs插件
import download from 'downloadjs'; // 引用插件
// 下载按钮点击事件
fileDownload () {
let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
download(url); // 没看错，就是这么简单
}
结果：我在自己的电脑上发现完全可以下载文件，沾沾自喜了大概十分钟，通过别人的电脑访问我的IP测试，发现有的完全没问题，有的还是出现跨域的问题。。。。。。。。。。。要疯了有木有。。。。。。。。接着改吧。。。。。。。
3.卸载downloadjs插件
npm uninstall downloadjs
第六次尝试：（前端已经尽力了，让后端大佬帮忙吧）
在使用了好多方法之后，在历时一整天的尝试之后，我，决定放下前端的骄傲，找后端大佬（php）商量一下，决定后端先将第三方服务器上的文件转换成二进制文件，然后通过一个接口返回给前端处理，上代码：
// 下载按钮点击事件
async fileDownload () {
let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
let fileName = this.data.file_name;
const res = await getFile({ // 获取文件二进制数据的接口
oss_url: url
});
this.saveAs(new Blob([res], { type: 'text/plain;charset=UTF-8' }), fileName);
}
// 导出文件函数
saveAs (obj, fileName) {
let ele = document.createElement('a');
ele.download = fileName || '下载';
ele.href = URL.createObjectURL(obj); // 绑定a标签
ele.style.display = 'none';
document.body.appendChild(ele); // 兼容火狐浏览器
ele.click();
setTimeout(function () { // 延时释放
URL.revokeObjectURL(obj); // 用URL.revokeObjectURL()来释放这个object URL
document.body.removeChild(ele);// 兼容火狐浏览器
}, 100);
};
PS:
(1).将二进制流转为Blob类型的时候，属性：{type: 'text/plain;charset=UTF-8'}；
(2).获取二进制文件的接口，我是使用项目里封装的axios方法，需注意设置属性：responseType: 'blob'
原文链接：https://blog.csdn.net/qq_32107121/article/details/102968442
