React用react-pdf-viewer加载Node.js服务器PDF遇net::ERR_BLOCKED_BY_CLIENT错误

错误原因分析 #

net::ERR_BLOCKED_BY_CLIENT 通常由以下情况导致：

• 浏览器广告拦截/隐私插件（如AdBlock、uBlock Origin）误拦截了PDF请求
• 后端CORS配置未允许前端域名访问
• 第三方CDN的PDF Worker脚本被拦截
• 跨域请求触发浏览器安全限制

解决方案步骤 #

1. 临时禁用浏览器拦截类扩展 #

直接禁用AdBlock、uBlock Origin等插件，刷新页面测试。这类插件可能将localhost下的静态资源请求误判为广告请求进行拦截。

2. 配置后端CORS规则 #

在Node.js后端添加CORS配置，允许前端应用的域名访问：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许你的React应用域名（示例为http://localhost:3000）
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

// 其他后端路由配置
app.get('/assure/file.pdf', (req, res) => {
  res.sendFile('file.pdf', { root: './path/to/your/files' });
});

3. 改用本地PDF Worker替代CDN #

避免第三方CDN的Worker脚本被拦截，先安装依赖：

npm install pdfjs-dist

然后修改组件代码中的Worker引用：

import './afficher_document.css';
import React, { useState } from 'react';
import { Worker, Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; // 引入本地Worker
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

function Afficher_document({showDocument, setShowDocument}) {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
  const [pdfFile, setPdfFile] = useState('/assure/file.pdf'); // 使用代理后的相对路径
  const [aria, setAria] = useState(false);

  const fermer = () => {
    setAria(true);
    setTimeout(() => {
      setShowDocument({
        afficher: false, 
        document: {
          nom: '',
          chemin: '',
          type: ''
        } 
      });
      setAria(false);
    }, 200);
  };

  return (
    <div className='container_afficher_document' aria-hidden={aria ? "true" : "false"}>
      <div className="boite">
        <div className="boite-header">
          <span className="titre">Affichage du Document </span>
          <span className="fermer" onClick={fermer}>
            <i className="bi bi-x"></i>
          </span>
        </div>
        <div className="boite-body">
          {pdfFile&&(
            <Worker workerUrl={pdfjsWorker}>
              <Viewer 
                fileUrl={pdfFile}
                plugins={[defaultLayoutPluginInstance]}
              />
            </Worker>
          )}
          {!pdfFile&&<>No file is selected yet</>}
        </div>
      </div>
    </div>
  );
}

export default Afficher_document;

4. 配置React开发服务器代理（可选） #

在React项目的package.json中添加代理配置，将后端请求转发到Node服务器：

{
  "name": "your-react-app",
  "proxy": "http://localhost:4000",
  // 其他配置项
}

这样前端请求/assure/file.pdf会自动转发到http://localhost:4000/assure/file.pdf，避免跨域问题和直接请求被拦截。

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