vue.js关于文件下载跨域的解决方法

情况说明:

项目将文件储存在第三方服务器(阿里云)上,在下载文件的时候,需要跨域,将处理过程记录如下。

第一次尝试:(还不是跨域问题)

刚开始的时候,因为能获取到文件的URL地址,所以尝试以标签的形式下载,代码如下:

// 下载按钮点击事件
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

你可能感兴趣的:(vue.js关于文件下载跨域的解决方法)