【问题解决】Axios调用文件下载获取不到文件名

问题描述

自己开发了一个后端下载文件的接口,然后通过浏览器直接访问这个接口,浏览器能正确得到文件名并下载;

而使用Axios时发现获取不到,经过打印响应体发现响应头里没有文件名

【问题解决】Axios调用文件下载获取不到文件名_第1张图片

而Java后端代码里是有的Content-Disposition 响应头的:

    public static void downloadWithBIO(String fileName, HttpServletResponse response) {
        String simpleName = fileName.substring(fileName.lastIndexOf(File.separator) + 1);
        try {
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(simpleName, "UTF-8"));
            response.setContentLengthLong(file.length());

            try (OutputStream os = response.getOutputStream();
                    FileInputStream fis = new FileInputStream(new File(fileName));
                    BufferedOutputStream bos = new BufferedOutputStream(os)) {
                byte[] bytes = new byte[4096];
                while (fis.read(bytes) != -1) {
                    bos.write(bytes);
                }
                os.flush();
            }
        } catch (IOException e) {
            throw new BusinessRuntimeException(e);
        }
    }

而且查看网络请求也是包含这个响应头的,所以只能是axios把这些响应头去除了。

问题解决

经查询axios文档发现只要将后端响应时再加一个响应头,axios就能放行指定的响应头

// 放行Content-disposition响应头
response.setHeader("Access-Control-Expose-Headers", "Content-disposition");

后端调整后,前端通过响应头中取响应头就可以了

【问题解决】Axios调用文件下载获取不到文件名_第2张图片

下载正常

【问题解决】Axios调用文件下载获取不到文件名_第3张图片

你可能感兴趣的:(问题解决,前端相关,前端,javascript,开发语言)