vue配置多个跨域+下载打包

最新推荐文章于 2025-03-06 21:49:58 发布

marconiho

最新推荐文章于 2025-03-06 21:49:58 发布

阅读量866

点赞数

文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/weixin_41645458/article/details/111641845

版权

本文介绍了如何在前端项目中通过axios和jszip等库实现从阿里云OSS下载文件，并进行批量打包。重点讲解了如何配置proxy代理以处理跨域请求，以及关键步骤如修改URL、依赖安装和封装下载方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地项目需要下载阿里云上的文件，而且需要前端下载后打包

1、配置多个代理

devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {//配置1
        target: `http://192.168.0.114:8088`,//本地后端接口
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      '/oa': {//配置2
        target: 'http://hsh-dongyu.oss-cn-beijing.aliyuncs.com/',  //目标接口域名
        pathRewrite: {
          '^/oa': '/oa'   //重写接口
        },
        changeOrigin: true,  //是否跨域
      },
    },
    disableHostCheck: true
},

2、代理地址
http://hsh-dongyu.oss-cn-beijing.aliyuncs.com/oa/1608795278991/%25E5%2593%25A6%25E5%259A%25AF%25E5%259A%25AF.docx?Expires=1924154962&OSSAccessKeyId=LTAI4G2mj8FUZ9g8xRrKSCV1&Signature=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx
http://hsh-dongyu.oss-cn-beijing.aliyuncs.com/oa/1608795278991/%25E5%2593%25A6%25E5%259A%25AF%25E5%259A%25AF.docx?Expires=1924154962&OSSAccessKeyId=LTAI4G2mj8FUZ9g8xRrKSCV1&Signature=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx

3、修改地址，使其匹配代理

var url1 = '上面地址1';
var url2 = '上面地址2';
url2 = url2.slice(url2.indexOf('/oa')) //'/oa/1608795278991/%25E5%2593%25A6%25E5%259A%25AF%25E5%259A%25AF.docx?Expires=1924154962&OSSAccessKeyId=LTAI4G2mj8FUZ9g8xRrKSCV1&Signature=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx'
url2 = url2.slice(url2.indexOf('/oa'))//'/oa/1608795278991/%25E5%2593%25A6%25E5%259A%25AF%25E5%259A%25AF.docx?Expires=1924154962&OSSAccessKeyId=LTAI4G2mj8FUZ9g8xRrKSCV1&Signature=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx'
//上面地址修改后就能够正常代理了

4、安装下载打包的依赖包
npm add axios
npm add jszip
npm add file-saver
5、封装下载方法

import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
const getFile = url => {
    return new Promise((resolve, reject) => {
        axios({
            method:'get',
            url,
            responseType: 'blob',
            // headers: {'Content-Type': 'multipart/form-data'}
        }).then(data => {
            resolve(data.data)
        }).catch(error => {
            reject(error.toString())
        })
    })
}
export default {
	methods: {
		handleBatchDownload() {
            const data = [url1 , url2] // 需要下载打包的路径
            const zip = new JSZip()
            const cache = {}
            const promises = []
            data.forEach(item => {
                const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
                    const arr_name = item.split("/") //根据业务需求来修改文件名称，不同项目文件名称获取方法不尽相同。
                    const file_name = arr_name[arr_name.length - 1] // 获取文件名
                    zip.file(file_name, data, { binary: true }) // 逐个添加文件
                    cache[file_name] = data
                })
                promises.push(promise)
            })
            Promise.all(promises).then(() => {
                zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
                    FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
                })
            })
	}
}

6、执行handleBatchDownload()方法即可打包下载
7、注意：
	1.文件名称需要根据项目来修改，当文件名称后缀为正确的文件后缀时，则表示修改成功。
	2.下载方法执行时 403则为跨域了说明跨域匹配失败，其他问题根据业务需求修改下载方法。

8、参考文章
	https://www.mmxiaowu.com/article/59b23f5d5b06a403cf687ed6
	https://blog.youkuaiyun.com/weixin_34185512/article/details/93916884?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control
	https://blog.youkuaiyun.com/liwan_1219/article/details/103879821