React+VTK.js项目读取系统目录VTK文件失败，求Webpack配置方法

核心问题 #

直接通过硬编码本地绝对路径（如C:/Users/admin/data/MrSkin.vtk）访问文件会触发浏览器同源策略限制，Webpack默认配置也不支持直接加载本地文件系统资源，因此不能直接这么写。

可行解决方案 #

方案1：前端文件选择器（推荐，无需修改Webpack） #

通过<input type="file">让用户手动选择VTK文件，绕开同源限制，直接读取文件内容：

import vtkPolyDataReader from '@kitware/vtk.js/IO/Legacy/PolyDataReader';

function VTKLoader() {
  const loadVTKFile = async (event) => {
    const selectedFile = event.target.files[0];
    if (!selectedFile) return;

    const vtkReader = vtkPolyDataReader.newInstance();
    const fileReader = new FileReader();

    fileReader.onload = () => {
      vtkReader.parseAsArrayBuffer(fileReader.result);
      const polyData = vtkReader.getOutputData(0);
      // 这里处理加载后的PolyData，比如传入渲染管线
      console.log('Loaded VTK data:', polyData);
    };

    fileReader.readAsArrayBuffer(selectedFile);
  };

  return (
    <div>
      <input type="file" accept=".vtk" onChange={loadVTKFile} />
    </div>
  );
}

export default VTKLoader;

方案2：服务端转发（仅适用于内部/开发场景） #

如果需要固定访问服务器本地目录的文件，需通过后端接口转发，同时修改Webpack devServer配置（仅开发环境）：

修改Webpack配置

如果使用Create React App，需借助craco或react-app-rewired修改配置；直接配置Webpack的话：

// webpack.config.js
const path = require('path');

module.exports = {
  // ...其他原有配置
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      // 添加自定义中间件，处理本地文件请求
      devServer.app.get('/vtk-files/:fileName', (req, res) => {
        const targetPath = path.join('C:/Users/admin/data/', req.params.fileName);
        res.sendFile(targetPath);
      });
      return middlewares;
    },
  },
};

前端请求代码

用代理后的路径访问文件：

const vtkReader = vtkPolyDataReader.newInstance();
vtkReader
  .setUrl('/vtk-files/MrSkin.vtk')
  .then(() => {
    const polyData = vtkReader.getOutputData(0);
    // 后续处理逻辑
  });

重要提示 #

• 绝对不要在前端代码中硬编码本地系统路径：浏览器安全策略会永久阻止这类跨源访问，生产环境下完全不可行。
• 文件选择器是通用方案：适配所有环境，符合浏览器安全规范，无配置成本。
• 服务端转发仅限内部场景：公网应用暴露本地文件目录会引发严重安全风险。

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