无Web服务器：从Windows网络驱动器运行的HTML显示文件修改日期

为什么Fetch无法工作？ #

是的，这完全是浏览器安全限制导致的。当你通过file://协议直接打开HTML文件时，浏览器会严格限制JavaScript的本地文件访问权限——fetch、XMLHttpRequest这类API在file://环境下无法访问本地或网络共享文件，目的是防止恶意脚本窃取用户本地数据。

可行解决方案 #

1. 搭建轻量本地Web服务器 #

这是最通用的方案，能绕过file://的限制：

• 先把Windows网络驱动器映射为本地盘符（比如Z:）
• 用Python快速启动服务器：

  # Python 3
  python -m http.server 8000 --bind 0.0.0.0
  

• 若用Node.js/Express写简单接口，通过fs.stat()读取文件的mtime（最后修改时间）：

  const express = require('express');
  const fs = require('fs').promises;
  const app = express();
  
  app.get('/file-meta', async (req, res) => {
    const filePath = req.query.path; // 传入共享文件路径，注意转义特殊字符
    try {
      const stats = await fs.stat(filePath);
      res.json({ lastModified: stats.mtime.toISOString() });
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  });
  
  app.listen(8000);
  

• 前端页面通过AJAX请求这个接口，获取并展示修改日期。

2. 使用Node.js/Electron构建桌面应用 #

如果是个人自用工具，Electron可以结合前端界面和Node.js的文件系统权限：

• 主进程中用Node.js的fs模块读取网络共享文件元数据：

  // Electron主进程代码
  const { ipcMain, app, BrowserWindow } = require('electron');
  const fs = require('fs').promises;
  
  ipcMain.handle('get-file-mtime', async (event, filePath) => {
    const stats = await fs.stat(filePath);
    return stats.mtime.toISOString();
  });
  

• 渲染进程（前端JS）通过ipcRenderer调用主进程方法：

  // 前端代码
  const { ipcRenderer } = require('electron');
  
  async function showFileMtime(filePath) {
    const mtime = await ipcRenderer.invoke('get-file-mtime', filePath);
    document.getElementById('mtime-display').textContent = `最后修改时间：${new Date(mtime).toLocaleString()}`;
  }
  

3. 本地脚本预生成元数据 #

适合静态页面场景，提前用脚本生成文件修改日期数据：

• 写一个PowerShell脚本，遍历网络共享文件，输出包含路径和修改时间的JSON：

  $sharePath = "\\server\share"
  $files = Get-ChildItem -Path $sharePath -File
  $metaData = $files | Select-Object FullName, LastWriteTime | ConvertTo-Json
  $metaData | Out-File -FilePath "file-meta.json" -Encoding UTF8
  

• 把生成的file-meta.json放在HTML同目录，前端JS读取该文件（部分浏览器在file://下允许读取同目录文件，若不行可直接把JSON内容嵌入HTML的<script>标签作为全局变量）：

  fetch('file-meta.json')
    .then(res => res.json())
    .then(data => {
      document.querySelectorAll('a').forEach(link => {
        const file = data.find(item => item.FullName === link.href);
        if (file) {
          link.insertAdjacentText('afterend', ` (${new Date(file.LastWriteTime).toLocaleString()})`);
        }
      });
    });
  

4. 浏览器扩展（仅个人使用） #

如果不想搭服务器或写桌面应用，可以做一个自用的浏览器扩展，利用扩展的文件系统访问权限：

• 申请file://*权限，通过WebExtensions的文件系统API读取文件元数据，然后注入脚本到你的HTML页面，把修改日期显示出来。

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