java后端向前端发送blob类型、arraybuffer类型数据流（解决前端跨域问题）

java后端向前端发送blob类型、arraybuffer类型数据流（解决前端跨域问题）

项目需求概述：
前端请求图片时遇到跨域问题，
思考解决方案时，考虑前端请求本地javaweb接口时带上图片url，
由后端请求到图片后再发送到前端。

后端代码

package com.neusoft.viic.server.dataService.controller;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

/**
 * @author dume
 * @create 2022-01-05 10:42
 **/
@Api(tags = "图片请求,前端blob类型或者arraybuffer类型接收")
@Controller
@RequestMapping("/image")
public class ImageController {

    @GetMapping(value = "/download")
    @ApiOperation(value = "图片请求")
    public void download(String url, HttpServletResponse response) throws Exception {
        ServletOutputStream out =null;
        ByteArrayOutputStream baos = null;
        try {
            //new一个URL对象
            URL connection = new URL(url);
            //打开链接
            HttpURLConnection conn = (HttpURLConnection) connection.openConnection();
            //设置请求方式为"GET"
            conn.setRequestMethod("GET");
            //超时响应时间为5秒
            conn.setConnectTimeout(5 * 1000);
            //通过输入流获取图片数据
            InputStream inStream = conn.getInputStream();
            byte[] buffer = new byte[1024];
            int len;
            baos = new ByteArrayOutputStream();
            while ((len=inStream.read(buffer))!=-1){
                baos.write(buffer,0,len);
            }
            response.addHeader("Content-Disposition", "attachment;filename=" + url);
            response.addHeader("Content-Length", "" + baos.size());
            response.setHeader("filename", url);
            response.setContentType("application/octet-stream");
            out = response.getOutputStream();
            out.write(baos.toByteArray());

        }catch (Exception e){
            e.printStackTrace();
            throw new RuntimeException();
        }finally {
            baos.flush();
            baos.close();
            out.flush();
            out.close();

        }


    }

}

前端代码：

//获取图片用于前端打包下载
var getFile = function(imgUrl) {
	return new Promise((resolve, reject) => {
		axios({
			method:'get',
			url: HOST_VIIC + 'image/download?url=' + imgUrl,
			responseType:'arraybuffer'		//这个参数必须加上，否则返回的图片打包后无法显示
		}).then(data => {
			resolve(data.data)
		}).catch(error => {
			reject(error.toString())
		})
	})
}

其中responseType:‘arraybuffer’，写成responseType:'blob’也可以。

如果你的url存在中文和特殊字符，请查看我另一篇文章：
java发送url请求地址中有中文和特殊字符，java发送到前端的文件名存在特殊字符，java后端向前端发送blob类型、arraybuffer类型数据流，后端和前端解决方案