React应用如何实现多PDF文件批量下载？

为什么直接粘贴URL正常，AJAX请求却被CORS拦截？ #

直接在浏览器地址栏粘贴URL属于导航请求（浏览器主动发起的资源导航行为），这类请求不受同源策略的严格限制——只要目标资源服务器没有设置禁止跨域的响应头（如X-Frame-Options），浏览器就会正常加载并触发下载。

而用Axios/fetch发起的是XMLHttpRequest/fetch类型的AJAX请求，这类请求受浏览器同源策略管控：必须目标服务器返回包含当前页面Origin的Access-Control-Allow-Origin响应头，否则浏览器会直接拦截请求结果，即使服务器已经正常返回了资源。

实现多文件下载的可行方案 #

方案一：模拟用户点击触发下载（绕过弹窗拦截） #

浏览器拦截批量window.open是因为判定其为非用户主动触发的弹窗，通过创建<a>标签并模拟点击的方式，将下载请求绑定到用户的单次交互（比如点击“批量下载”按钮），能大幅降低拦截概率：

// 批量下载函数，需绑定到用户主动触发的事件
function batchDownload(urls) {
  urls.forEach(url => {
    const a = document.createElement('a');
    a.href = url;
    a.target = '_blank';
    a.download = ''; // 留空让服务器决定文件名
    // 插入DOM后模拟点击，避免部分浏览器拦截
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  });
}

// 绑定到按钮点击（必须是用户主动触发的事件）
document.getElementById('batch-download-btn').addEventListener('click', () => {
  const pdfUrls = ['https://example.com/pdf1.pdf', 'https://example.com/pdf2.pdf'];
  batchDownload(pdfUrls);
});

如果仍有浏览器拦截，可添加少量延迟逐个触发，降低触发频率：

async function batchDownload(urls) {
  for (const [index, url] of urls.entries()) {
    await new Promise(resolve => setTimeout(resolve, 100 * index));
    const a = document.createElement('a');
    a.href = url;
    a.target = '_blank';
    a.download = '';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}

方案二：后端中转（彻底解决CORS与拦截问题） #

如果前端方案仍有局限，可通过自己的后端服务中转请求：

1. 前端将需要下载的URL列表发送给后端接口
2. 后端依次请求每个PDF资源（服务器端请求不受浏览器CORS限制）
3. 后端将多个PDF打包成ZIP文件，返回给前端触发单文件下载

示例后端伪代码（Node.js + Express）：

const express = require('express');
const axios = require('axios');
const archiver = require('archiver');
const app = express();

app.get('/batch-pdf', async (req, res) => {
  const urls = req.query.urls.split(',');
  const zip = archiver('zip');
  
  res.attachment('batch-pdfs.zip');
  zip.pipe(res);

  for (const url of urls) {
    const response = await axios.get(url, { responseType: 'stream' });
    const filename = url.split('/').pop() || `pdf-${Date.now()}.pdf`;
    zip.append(response.data, { name: filename });
  }

  await zip.finalize();
});

前端只需调用该后端接口，即可触发ZIP文件下载，完全避免浏览器拦截和CORS问题。

内容的提问来源于stack exchange，提问作者Crhist0