解决SpringBoot与Vue前后端分离下载文件跨域的问题_MrDJun的博客-程序员秘密

技术标签： Vue

虽然是同一个域名，只要请求方与响应体的协议、域名、端口不一致都会存在跨域问题。

虽然后端配置了允许跨域访问、前端也关闭了vue的安全策略，但是在文件下载这里，仍然不能正常下载。

第一：在后端的响应体中设置允许跨域的头，如下：

private void genCode(HttpServletResponse response, byte[] data) throws IOException {
        response.reset();
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        response.setHeader("Content-Disposition", "attachment; filename=\"article.zip\"");
        response.addHeader("Content-Length", "" + data.length);
        response.setContentType("application/octet-stream; charset=UTF-8");
        org.apache.commons.io.IOUtils.write(data, response.getOutputStream());
    }

这种方式是输出流的形式，那么Vue是有专门接收流的方式的，而不能交给浏览器来自动处理流而实现下载文件（此坑）

第二：

这里给大家提供一个函数

    // 下载文件
    download(data) {
      let url = window.URL.createObjectURL(data)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.download = "article.zip" // 设置文件名
      document.body.appendChild(link)
      link.click()
      window.URL.revokeObjectURL(link.href);
    },

函数使用正确的姿势：

this.$http.get("请求地址",{
        responseType: 'blob'
      }).then(res => {
       
    this.download(res.data) // 将接收的流传入即可
})

本文链接：https://blog.csdn.net/qq_41647999/article/details/109237203

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Effective C++改善程序与设计的55个具体做法笔记_fengbingchun的博客-程序员秘密

Scott Meyers大师Effective三部曲：Effective C++、More Effective C++、Effective STL，这三本书出版已很多年，后来又出版了Effective Modern C++。More Effective C++的笔记见：https://blog.csdn.net/fengbingchun/article/details/102990753E...

利用python批量将RGB图片转换成灰度图片_求是书院萌新一枚的博客-程序员秘密

利用python批量将RGB图片转换成灰度图片前言一、代码实现二、RGB-Gray结果如下总结前言这里利用python批量处理了RGB图片转换成灰度图片，主要依靠cv2.cvtColor库函数。如果想用python批量调整图片的大小请看此文章，实测有用一、代码实现请根据需要自行更改文件地址即可。import os.pathimport globimport cv2import cupyfrom PIL import Imagedef convertpng(pngfile,outd

JS逆向核心流程_js代码逆向_我的眼里只有bug的博客-程序员秘密

JS逆向核心流程，从分析网络请求、定位加密参数生成处、扣代码、补环境

UVM实战卷I学习笔记9——UVM中的sequence（5）_菜鸡想要飞的博客-程序员秘密

目录virtual sequence的使用*带双路输入输出端口的DUT*sequence之间的简单同步*sequence之间的复杂同步virtual sequence的使用*带双路输入输出端口的DUT下面新的DUT相当于在前面DUT的基础上增加了一组数据口，这组新的数据口与原先的数据口功能完全一样。新的数据端口增加后，由于这组新的数据端口与原先的一模一样，所以可以在test中再额外实例化一个my_env：class base_test extends uvm_test; my_env env0

基于Java+SpringBoot+Thymeleaf+Mysql在线购物网站商城系统设计实现_黄菊华老师的博客-程序员秘密

基于Java+SpringBoot+Thymeleaf+Mysql在线购物网站商城系统设计实现

python调用IP摄像头_韩韩的博客的博客-程序员秘密

利用RTSP+opencv就可以实现网络摄像头的调用rtsp是实时流传输协议，是基于TCP/IP协议体系中的一个应用层协议，可以控制声音或者影像的多媒体串流协议。但是不同品牌的摄像头有不同的RTSP地址。下面先简单列一下常用的摄像头的RSTP的地址。各种摄像头品牌的RTSP地址利用RTSP+opencv就可以实现网络摄像头的调用3S4XEMA-MTKABSAbsolutronACTIAcumenAirlink101AirLiveALinkingALLIEDEAsanteAsoniAviosysAVSA