若依前后端分离框架下载需要授权的url文件，解决跨域问题

一、问题描述：

使用若依前后端分离项目，前台点击下载图片，触发下载事件，而不是直接打开显示图片

二、解决思路：

前端调用后端自定义下载接口，将需要下载的图片https链接传给后端下载，将二进制(blob)文件流返回给前端，前端用a标签下载

• 后端需要设置响应头 response.addHeader("Access-Control-Allow-Origin", "*"); 允许跨域
  前端需要设置 responseType: 'blob' 告诉后端前端需要的是blob二进制文件流，否则会导致返回乱码
• 请求方式一、前端调用request.js方式封装的发送请求方式调用后端自定义下载接口/common/download/url
  或者
  请求方式二、前端发送请求调用后端自定义文件下载接口/common/download/url的代码可以参考：链接指引，下面也有给出

三、前端代码：

①、标签：

   <template slot-scope="scope">
     <el-button
       id="IframeReportImg"
       size="mini"
       type="text"
       icon="el-icon-download"
       @click="handleUpload(scope.row)"
     >下载
     </el-button>
   </template>

②、请求方式一：用request.js封装的请求后端下载接口

//下载图片
export function downloadImgs(params) {
   
  return request({
   
    url: '/common/download/url',//后端自定义的下载接口/common/download/url，路径为admin模块的com.ruoyi.web.controller.common;
    responseType: 'blob', //设置后端返回类型为二进制流，不设置会返回乱码
    method: 'get',
    params
  })
}

  handleUpload(row) {
   
    const url = row.processedImg//图片的https链接
    const imgName = url.substr(url.lastIndexOf('/') + 1)
    downloadImgs(