使用fetch获取PDF时response.text()即便响应正常也始终返回空

算力阿峰

2026-9-30

问题原因及解决方案

核心原因

直接原因是你在fetch配置中使用了mode: 'no-cors'：该模式是浏览器为跨域请求提供的受限模式，仅允许发送无自定义头的简单请求，最终返回的是不透明响应（opaque response），浏览器会完全屏蔽响应的所有内容、响应头信息，所以无论接口实际返回什么内容，你调用res.text()拿到的永远是空字符串，该模式仅适合不需要读取响应内容的场景（例如上报埋点、预加载资源等）。
次要逻辑问题：PDF是二进制格式文件，即使可以正常拿到响应，使用text()解析二进制内容也会出现乱码，无法正常校验内容有效性。

解决方案

第一步：移除fetch配置中的mode: 'no-cors'参数，恢复默认的cors模式。
第二步：如果移除后请求报跨域错误，需要让PDF所在服务的后端配置CORS响应头，放行你的站点域名的访问权限，核心需要配置的响应头为Access-Control-Allow-Origin。
第三步：优化校验逻辑，不要用text()解析PDF内容，优先通过响应状态判断可用性，也可以读取响应blob后校验MIME类型，参考优化后的代码：

const handleOpenPDF = (url: string) => {
  fetch(url, {
    method: 'GET',
  })
    .then(res => {
      // 先校验响应状态是否正常
      if (!res.ok) {
        throw new Error(`请求异常，状态码：${res.status}`);
      }
      // 可选：校验返回内容类型是PDF
      return res.blob();
    })
    .then(blob => {
      if (blob.type !== 'application/pdf') {
        throw new Error('返回内容不是PDF格式');
      }
      console.log('PDF校验通过');
      window.open(url, '_blank');
    })
    .catch(err => {
      console.warn('PDF校验失败', err);
      // 可在这里加失败提示逻辑
    });
};