使用Fetch API读取本地JSON文件时遇URL scheme不支持错误

嘿，我太懂这种查遍谷歌还是卡壳的感觉了！你遇到的问题本质是Fetch API本身就不支持file://协议的资源访问——这是Chromium内核（Electron基于它）的安全限制，防止前端脚本随意读取本地文件系统的内容，毕竟直接暴露本地文件给网页风险太高了。

针对你的Electron场景，给你几个靠谱的解决方案：

方案1：用Electron的原生fs模块读取本地文件 #

Electron允许渲染进程（如果配置了Node集成）直接使用Node.js的fs模块，这是最直接的解决方式，完全绕开Fetch的限制。把你的代码改成这样：

// 引入fs的promise版本，和你原来的异步写法更匹配
const fs = require('fs').promises;
const path = require('path');

// 用path模块构建绝对路径，避免相对路径的坑
const jsonFilePath = path.join(drr, 'dashboard/bnb.json');

fs.readFile(jsonFilePath, 'utf8')
  .then(rawData => {
    const res = JSON.parse(rawData);
    // 下面是你原来的业务逻辑，直接复用就行
    this.currency = res;
    Object.assign(this.stock, res.pairs[0]);
    Object.assign(this.header, res.pairs[0]);
    this.header.name = res.name;
  })
  .catch(error => {
    console.error('读取JSON文件失败:', error);
  });

注意事项 #

如果你的代码是在Electron的渲染进程里，需要确保主进程的BrowserWindow配置里开启了nodeIntegration: true（Electron 5+默认是关闭的），或者用contextBridge把fs相关方法暴露给渲染进程，避免安全风险。

方案2：启动本地HTTP服务器（适合开发调试） #

如果你还是想用Fetch API，可以在本地起一个简单的HTTP服务器，把你的项目目录作为服务器根目录，这样就能用http://协议访问JSON文件了：

1. 全局安装http-server工具：

npm install -g http-server

2. 进入你的项目根目录，启动服务器：

http-server

3. 把Fetch的URL改成服务器地址，比如：

fetch('http://localhost:8080/dashboard/bnb.json')
  // 后面的逻辑和你原来的代码一样

这个方法适合快速调试，但打包Electron应用的时候还是推荐用方案1，毕竟不需要额外依赖服务器。

方案3：把JSON文件打包为应用静态资源 #

如果你的JSON文件是应用的内置资源，可以把它放在Electron的静态资源目录里，然后用app.getAppPath()（主进程）或者__dirname（渲染进程，需要配置）来获取绝对路径，再用fs读取。这样打包后的应用也能正常访问文件。

比如在渲染进程里：

const fs = require('fs').promises;
const path = require('path');

// 假设你的JSON文件在应用的resources/dashboard目录下
const jsonPath = path.join(__dirname, 'dashboard/bnb.json');

// 后面的读取逻辑和方案1一样

总结一下，方案1是Electron应用最推荐的方式，既符合Electron的特性，又能避开Fetch的限制。试试上面的方法，应该能解决你的问题！

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