Vitest测试中fetch本地文件报错：无法解析URL

安全阿岳

2026-7-30

问题解答

核心疑问：JavaScript中能否用fetch读取本地文件？

不能直接用fetch读取本地文件路径。fetch是基于HTTP/HTTPS协议的API，浏览器出于安全限制，不允许直接通过fetch访问本地文件系统（比如直接传入customStyle.test.yaml这种相对路径）。当你在测试环境直接传入本地文件名时，浏览器会把它当成相对URL去解析，但此时没有HTTP服务器提供这个资源，就会抛出TypeError: Failed to parse URL错误。

为什么生产环境能正常运行？

生产环境中文件名通过WebSocket传递，这里的文件名实际对应服务器端的资源路径，fetch发起的是HTTP请求到服务器，由服务器读取文件并返回内容，并非直接访问本地文件系统，所以能正常工作。

测试环境的解决方案

针对你的测试场景，有几种可行的解决方式：

1. Mock fetch函数（推荐单元测试使用）

单元测试无需真实读取文件，直接mockfetch的返回值即可，既高效又不依赖文件系统。以Jest为例：

// 在测试文件顶部mock全局fetch
global.fetch = jest.fn(() =>
  Promise.resolve({
    text: () => Promise.resolve(`fontSize: 18px`), // 预设测试用的YAML内容
  })
);

describe("from local custom style file", () => {
  it("fontSize has change", async () => {
    // 直接await异步操作，不要用立即执行的async函数，避免测试提前结束
    await style.load("customStyle.test.yaml");
    // 这里添加你的断言逻辑，比如检查解析后的fontSize是否正确
    expect(/* 你的断言目标 */).toBe(18);
  });
});

2. 启动本地HTTP服务器

如果需要真实读取文件测试，可以用http-server、live-server等工具启动本地HTTP服务，把项目目录作为服务器根目录。此时fetch("customStyle.test.yaml")会被解析成http://localhost:端口号/customStyle.test.yaml，就能正常请求文件。

3. 适配Node.js环境（如果测试在Node端运行）

如果你的测试是在Node.js环境下执行（比如用Jest的Node模式），可以直接用Node内置的fs模块读取文件，修改load函数适配环境：

import * as fs from 'fs/promises';
import * as path from 'path';

const load = async (fileName: string) => {
    try {
      let yamlString: string;
      // 判断运行环境：浏览器用fetch，Node用fs
      if (typeof window !== 'undefined') {
        const res = await fetch(fileName, {
          headers: {
            'Content-Type': 'application/yaml',
            'Accept': 'application/yaml'
          }
        });
        yamlString = await res.text();
      } else {
        // Node环境下解析文件绝对路径并读取
        const filePath = path.resolve(__dirname, fileName);
        yamlString = await fs.readFile(filePath, 'utf-8');
      }
      const data = YAML.parse(yamlString);
      // ...后续业务逻辑
    } catch (error) {
      console.error("Failed to read style config: ", error);
    }
};

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