vue 前端设置允许跨域_vue下载ftp文件的两种情况(干货系列之纯前端解决跨域)

最新推荐文章于 2024-05-07 09:05:42 发布
最新推荐文章于 2024-05-07 09:05:42 发布
阅读量1.2k 收藏 3
点赞数
文章标签： vue 前端设置允许跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31076517/article/details/112231279
版权

vue下载ftp文件

首先查看自己的vue版本

f9995710d524dd1eb4dfbd78179b7cf3.png

1、如果vue项目和ftp地址未跨域

直接用a标签的download属性就可以了以http://xx.xxx.xxx.xx/ftp/JPG/2020-06/2f85d61866e24adc9cdacad189321fbe/a2f551d676b549d0939d31371b33399f.JPG为例（注意这是带文件格式的ftp地址，这样做有很多的方便，可以省却前端的一些操作）

<!-- href值为ftp地址，此处是http://xx.xxx.xxx.xx/ftp/JPG/2020-06/2f85d61866e24adc9cdacad189321fbe/a2f551d676b549d0939d31371b33399f.JPG --> 
<a href="http://xx.xxx.xxx.xx/ftp/JPG/2020-06/2f85d61866e24adc9cdacad189321fbe/a2f551d676b549d0939d31371b33399f.JPG" download></a>

2、如果vue项目和ftp地址跨域

使用a标签的download属性的前提是vue项目和ftp地址未跨域，跨域的话就不能使用download属性了，我们可以走曲线救国的道路:

    最低0.47元/天 解锁文章
    嗷呜哈
    关注
    • 0
      点赞
    • 踩
    • 3
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    vue中使用a标签前端下载文件，涉及跨域
    m0_61073208的博客
    04-08 2266
    做项目遇到一个需要下载文件的地方，不想折腾，意外发现a标签可以下载文件。 这是W3CSchool的示例： 问题： 实际操作后，发现每次都是弹出预览窗口 <a href="http://localhost:3320/items/upload_d3a866143d54eb08e6b81d2550a3652a.pdf" download="测试">下载</a> 解决： 首先排除掉HTML版本的影响，因为直接就是带了“<!DOCTYPE html>
    前端（VUE、react）通用文件下载代码
    04-22
    前端文件下载： 1.VUE/jQuery 2.React 都可以参照该方式下载文件，将方法提出来挂载全局引用即可。
    Vue解决跨域问题
    wangshiqi666的博客
    04-02 675
    vue跨域问题
    2024年最全vue中实现文件批量打包压缩下载（以及下载跨域问题分析），前端开发培训武汉
    最新发布
    2401_84618023的博客
    05-07 1003
    对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
    vue 原生js请求接口并下载文件三种方法axios fetch XMLHttpRequest
    qq_51389137的博客
    11-24 2932
    【代码】vue 原生js请求接口并下载文件三种方法axios fetch XMLHttpRequest。
    vue 使用a标签跨域下载文件
    u010328533的博客
    05-20 2664
    vue项目中下载文件 场景：项目中下载文件过大时接口无法正常响应， 后端给的解决方案是从另一个文件服务器上下载文件，所以提供的是一个跨域访问的api接口，前端需跨域调用后端接口下载文件 // 下载 async downLoad(row) { const res = await getDownUrl({ 先调普通接口，后端返回一个跨域的url packId: row.id }) if (!res.isSuccess) { ret
    vue开发----关于文件下载跨域的解决方法
    Crazy_LinkFern的博客
    11-08 1万+
    情况说明： 项目将文件储存在第三方服务器（阿里云）上，在下载文件的时候，需要跨域，将处理过程记录如下。 第一次尝试：（还不是跨域问题） 刚开始的时候，因为能获取到文件的URL地址，所以尝试以<a>标签的形式下载，代码如下： // 下载按钮点击事件 fileDownload (url, fileName) { let ele = document.createEleme...
    前端利用图片链接下载图片
    qq_42423991的博客
    07-29 1118
    downloadByBlob(url, name) { const image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { const canvas = document.createElement('canvas') canvas.width = image.wid.
    a 标签跨域下载视频
    qq_35661140的博客
    03-27 182
    【代码】a 标签跨域下载视频。
    Vue项目中跨域问题解决方案
    08-27
    本文给大家介绍了vue项目中跨域问题的完美解决方案，通过更改header，使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建），具体内容详情大家跟随脚本之家小编一起学习吧
    vue-axios + vue3-axios Axiso解决跨域访问完整源码
    02-16
    vue_axios + vue3_axios Axiso解决跨域访问【完整源码】
    vue跨域请求
    03-27
    vue的3种跨域请求方式
    Vue中跨域及打包部署到nginx跨域设置方法
    01-19
    一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们...
    解决Vue浏览器跨域问题
    weixin_61774894的博客
    06-06 2003
    只需要修改 nginx 的配置即可解 决跨域问题，支持所有浏览器，支持 session，不需要修改任何代码，并且不会影响服务器 性能。在服务端返回的响应头中添加Access-Control-Allow-Origin字段来指定允许的跨域源，例如Access-Control-Allow-Origin: http://example.com。Fetch API：Fetch API是一种新的Web API，提供了更加简洁和灵活的方式来发送HTTP请求和处理响应数据。
    命令行下载FTP文件
    Roki_Zhang的博客
    03-10 1万+
    DOS 命令行的方式下载 FTP 文件
    前端：下载文件实现方式及跨域下载（详解）
    热门推荐
    米斯特曹
    12-07 2万+
    前言：本文详细介绍在开发过程中前端如何与后端配合实现文件下载至本地，并详细说明特殊格式文件如何处理。如果你是一名前端开发者，恰好需要实现后端文件下载至本地的需求，那么恭喜你本篇文章一定会帮到你！ 需求：实现二进制下载、URL下载、跨域下载 后端：Spring 前端：Vue 要点：后端返回文件流还是URL下载地址？ 一、解析：二进制式下载 流程：后端返回二进制文件流的情况下，我们前端需要...
    vue前端文件下载实现
    challenglistic的博客
    09-20 5354
    vue下载文件前后端代码
    网页中是否能实现下载文件夹？
    weixin_45525177的博客
    09-04 1059
    1.第一种方法：downFile(下载地址,保存名称); function downFile(content, filename) { //创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display...
    vue前端设置sockjs跨域
    09-08
    Vue前端设置SockJS跨域的步骤如下： 1. 在Vue项目中找到webpack配置文件，一般是`vue.config.js`。 2. 在配置文件中添加如下代码来设置开发服务器的代理： ```javascript module.exports = { devServer: { ...

    “相关推荐”对你有帮助么？

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值