如何使用NextJs ApiRouter跨域下载图片

最新推荐文章于 2024-04-06 08:37:58 发布

前端练习生

最新推荐文章于 2024-04-06 08:37:58 发布

阅读量449

点赞数 8

分类专栏：前端文章标签： reactjs 前端

本文链接：https://blog.csdn.net/csl784513390/article/details/134803620

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如何使用NextJs ApiRouter跨域下载图片

有需求要前端导出表格，表格内插入图片，需要将外部链接的图片下载，但是使用axios get方式报了跨域错误，于是想通过转发来解决跨域问题

文件目录

imgBuffer.ts

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import axios from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = any

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  if(req.method === 'POST') {
    const {filePath} = req.body
    axios(filePath, {
      method: 'get',
      responseType: "stream"
      // responseType: 'blob'
    }).then(r => {
      const {data} = r
      res.setHeader('Content-Type', 'image/*')
      data.pipe(res)
    }).catch(e => {
      res.status(200).send({
        code: '000000',
        msg: "文件下载错误"
      })
    })
    return
  }
  res.status(403).send({
    code: '000000',
    msg: "文件下载错误"
  })
}

request.ts

export const getFilesRequest = (path: string) => {
  return request(`/imgBuffer`, {
    method: 'POST',
    responseType: 'blob',
    data: {
      filePath: encodeURI(path)
    },
    hideMessage: true
  }) as any
}

其中request方法只是axios的封装，可以直接换成axios

使用方式

getFilesRequest(file?.url || file).then((res: any) => {
                const blob = res
                const url = URL.createObjectURL(blob)
                const a = document.createElement('a')
                document.body.appendChild(a)
                a.download = ''
                a.href = url
                a.click()
                document.body.removeChild(a)
              })