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

本地项目需要下载阿里云上的文件，而且需要前端下载后打包1、配置多个代理

devServer: {host: '0.0.0.0',port: port,proxy: {[process.env.VUE_APP_BASE_API]: {//配置1target: `http://192.168.0.114:8088`,//本地后端接口changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}},'/oa': {//配置2target: '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=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx3、修改地址，使其匹配代理

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/59b23f5d5b06a403cf687ed6https://blog.csdn.net/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.controlhttps://blog.csdn.net/liwan_1219/article/details/103879821

vue配置多个跨域+下载打包相关推荐

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题
前言在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...
vue 使用a标签跨域下载文件
vue项目中下载文件场景:项目中下载文件过大时接口无法正常响应, 后端给的解决方案是从另一个文件服务器上下载文件,所以提供的是一个跨域访问的api接口,前端需跨域调用后端接口下载文件 // 下载as ...
VUE部署nginx解决跨域问题
VUE部署nginx解决跨域问题 Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图. VUE配置的代理 Vue的代理跨域问题,需要确定的是在开发 ...
Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)
Vue 配置使用 externals 使用cdn减小打包体积在 vue.config.js 中书写配置 // 引入webpackconst webpack = require('webpack') ...
vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
Vue + Nodejs + Express 解决跨域的问题
Vue + Nodejs + Express 解决跨域的问题首先检测你的Vue的版本号此文章针对3.0版本解决跨域问题 $ vue -V 2.X or 3.X 直接访问如下 created() { ...
Vue之jwt（跨域身份验证，令牌）
1. JWT是什么 JSON Web Token (JWT),它是目前最流行的跨域身份验证解决方案 2. 为什么使用JWT JWT的精髓在于:"去中心化",数据是保存在客户端的. ...
前端：下载文件实现方式及跨域下载（详解）
前言:本文详细介绍在开发过程中前端如何与后端配合实现文件下载至本地,并详细说明特殊格式文件如何处理.如果你是一名前端开发者,恰好需要实现后端文件下载至本地的需求,那么恭喜你本篇文章一定会帮到你! 需求 ...
java 跨域下载文件_文件下载重命名（可跨域）
一.正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 var link = document.createElement('a'); link.href = file. ...

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

vue配置多个跨域+下载打包相关推荐

最新文章

热门文章