一个包含图片下载链接的数组 nonEmptyActivityCodes，并且您想要将这些图片下载并转换为 Blob 对象，然后打包成一个zip文件失败

Question

根据后台返回数组，用JSZip压缩，目前问题fetch请求，报跨域错；后端返回格式，看下我代理配置是不是有问题？

const {
  baseURL,
} = require('./src/config')
  devServer: {
 proxy: {
      [baseURL]: {
        target: `https://abc.com`,
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          ['^' + baseURL]: '',
        //    ['^/api']: '' // 重写路径，移除 '/api' 前缀
        },
      },
    },
}
//.src/config
module.exports = {
  // 默认的接口地址, 问号后边代表开发环境，冒号后边代表生产环境
  baseURL:
  process.env.NODE_ENV === 'development'
      ? 'https://abc.com/admin-api'
      : 'https://abc.com/admin-api',

  // 配后端数据的接收方式
  contentType: 'application/json;charset=UTF-8',
}
//接口调用
export function download(params) {
  return request({
    url: 'distributor/download/' + params,
    method: 'get',
  })
}
    async downloadTable() {
        try {
          // 调用 download 函数并传入必要的参数，例如商品ID
          let response = await download(this.linkID);
          // 使用 map 来获取每个对象的 activity_code 属性
          const activityCodes = response.map(item => item.activity_code);
          //移除空字符串
          const nonEmptyActivityCodes = activityCodes.filter(code => !!code && !/^\s*$/.test(code));
          console.log('response',nonEmptyActivityCodes)  // ["http://***/.png"]
          // 创建JSZip对象
          const zip = new JSZip();
          const promises = nonEmptyActivityCodes.map(async (url, index) => {
                // 为每个图片URL创建一个请求
                 // 这将允许fetch请求，
                const fetchData = await fetch(url);
                console.log('fetch',fetchData)
                // 将图片转换为Blob对象
                const blob = await fetchData.blob();
                // 为每个图片生成一个文件名，例如：image1.jpg, image2.png
                const filename = `image${index + 1}${url.match(/\.[^.]+$/)[0]}`;
                // 将Blob对象作为文件添加到zip对象中
                zip.file(filename, blob);
              });
              // 等待所有图片下载完成
              await Promise.all(promises);
          // 生成zip文件的Blob对象
          zip.generateAsync({ type: "blob" }).then(function(content) {
              // 创建一个链接元素，用于触发下载
              const downloadUrl = window.URL.createObjectURL(content);
              const link = document.createElement('a');
              link.href = downloadUrl;
              // 设置下载文件的名字
              link.setAttribute('download', 'images.zip');
              // 模拟点击链接，触发下载
              document.body.appendChild(link);
              link.click();
              // 清理DOM
              document.body.removeChild(link);
              window.URL.revokeObjectURL(downloadUrl);
          });

          this.$baseMessage('下载成功', 'success');
        } catch (error) {
          console.log(error)
          this.$baseMessage('下载失败', 'error');
        }
      },

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】：您想要解决的问题是如何在前端使用JSZip库将多个图片下载链接打包成一个zip文件，但遇到了跨域错误（CORS policy）。

【图片内容】：

1. 第一张图片显示了一个环境URL和响应示例，其中包含了一个昵称和手机号组合的字符串，以及一个二维码下载地址。
2. 第二张图片显示了一个错误信息，指出在尝试从某个URL获取资源时，由于CORS策略，请求被阻止了。错误提示建议如果需要无CORS的不透明响应，可以将请求的模式设置为'no-cors'。

【问题出现原因】：问题出现的原因是在前端尝试通过fetch API下载图片时，由于跨域资源共享（CORS）策略的限制，浏览器阻止了请求。您的代理配置可能没有正确地代理到实际的图片资源服务器。

【问题解决方案】：

1. 确保后端服务器配置了适当的CORS策略，允许前端应用的域名进行资源访问。
2. 如果您无法控制后端服务器的CORS设置，您可以考虑设置mode: 'no-cors'在fetch请求中，但这将限制您只能获取到opaque response，即不能读取响应的内容，只能知道响应的状态。

【提供代码】：由于您的需求是下载图片并打包成zip，而不是读取响应内容，所以可以使用no-cors模式。但请注意，使用no-cors模式将无法获取到图片的确切MIME类型，这可能会影响zip文件中图片的正确展示。

// ...之前的代码保持不变

const promises = nonEmptyActivityCodes.map(async (url, index) => {
  const fetchData = await fetch(url, { mode: 'no-cors' });
  const blob = await fetchData.blob();
  const filename = `image${index + 1}${url.match(/\.[^.]+$/)[0]}`;
  zip.file(filename, blob);
});

// ...之后的代码保持不变

【代码运行方式】：您需要在支持ES6的现代浏览器中运行此代码，并且需要有JSZip库的支持。

【代码预期运行结果】：如果代码成功运行，它将创建一个zip文件，并触发浏览器的下载操作，用户可以下载并解压缩查看图片。

【推荐相关链接】：

• MDN Web Docs on CORS
• MDN Web Docs on fetch()
• JSZip Documentation