Tauri应用中React组件调用fetch读取本地文件报跨域错误怎么办？

程序员江梅提问于 2026-02-12 04:47:21 阅读 22

框架

在用Tauri + React开发桌面应用时，我在React组件里用fetch读取本地JSON文件，结果报CORS错误。虽然Tauri文档说可以安全访问文件系统，但代码一直失败：


import { useEffect } from 'react';

function DataFetcher() {
  useEffect(() => {
    fetch('file:///src/data/config.json')
      .then(res => res.json())
      .then(data => console.log(data))
      .catch(err => console.error('Fetch失败:', err));
  }, []);
  return <div>加载中...</div>;
}

我试过把路径改成相对路径和绝对路径都不行，控制台提示：”Failed to load given URL. Reason: Request is not allowed by plugin configuration”。是不是Tauri需要特殊配置才能让fetch访问本地文件？或者应该用别的API代替？

Tauri 桌面应用

我来解答赞 7 收藏

反馈

1 条解答

司马子冉 Lv1

别用 fetch 读本地文件，Tauri 环境下这是典型的跨域问题，因为你的前端运行在 http 协议下（比如 http://localhost:1420），而 file:/// 是另一个协议，浏览器直接拦了。

而且 Tauri 的安全策略默认也不允许这种随意的 file 协议访问，所以报错 "Request is not allowed by plugin configuration"。

正确做法是：用 Tauri 提供的 fs 模块来读文件，这才是安全且推荐的方式。

代码给你：

import { useEffect } from 'react';

import { readTextFile } from '@tauri-apps/api/fs';

import { appDataDir } from '@tauri-apps/api/path';



async function loadConfig() {

  // 假设你的 config.json 放在 src/data 下，但构建后会打包到目标目录

  // 更实际的做法是把静态数据文件放在应用的数据目录或资源目录中

  try {

    const data = await readTextFile('data/config.json'); // 相对于你的 Tauri 应用资源路径

    console.log(JSON.parse(data));

  } catch (err) {

    console.error('读取失败:', err);

  }

}



function DataFetcher() {

  useEffect(() => {

    loadConfig();

  }, []);



  return 加载中...
;

}

关键点：

- 要在 tauri.conf.json 里配置 fs 插件权限，确保启用 allowList.readTextFile：

{

  "tauri": {

    "allowlist": {

      "fs": {

        "readTextFile": true

      }

    }

  }

}

- 文件路径不是随便写 file:///，要把你需要的文件放在 src-tauri/resources 目录下，然后通过相对资源路径读取。或者你也可以用 resolveResource 来定位。

- 如果你真想放外部文件，可以用 path 模块拼接真实路径，比如用 appDataDir() 获取用户数据目录再拼 config.json。

总之，别折腾 fetch + file 协议了，这条路在 Tauri 里走不通，用它的 API 才是正解。

2026-02-12 05:01